私はangularjsを初めて使用し、2つのタブを持つページを持っています。ディレクティブを使用してタブを作成し、$ httpを使用してサーバーからjsonを取得します。問題は、ユーザーが他のタブを表示することを決定するまでサーバーを要求したくないことです。タブ。これどうやってするの？これが私の指示です：
var sdmtab = angular.module('sdmTab', []);
sdmtab.directive('tab', function() {
return {
restrict: 'E',
transclude: true,
template: '<div role="tabpanel" ng-show="active" ng-transclude></div>',
require: '^tabset',
scope: {
heading: '@'
},
link: function(scope, elem, attr, tabsetCtrl) {
scope.active = false;
tabsetCtrl.addTab(scope);
}
};
});
sdmtab.directive('tabset', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'app/components/directiveTemps/tabset.html',
bindToController: true,
controllerAs: 'tabset',
controller: function() {
var self = this;
self.tabs = [];
self.addTab = function addTab(tab) {
self.tabs.push(tab);
if (self.tabs.length === 1) {
tab.active = true;
}
self.select = function(selectedTab) {
angular.forEach(self.tabs, function(tab) {
if (tab.active && tab !== selectedTab) {
tab.active = false;
}
});
selectedTab.active = true;
};
};
}
};
});
sdmtab.directive('teamsq', function() {
return {
restrict: 'E',
scope: {},
templateUrl: 'app/components/directiveTemps/teamSquad.html',
bindToController: true,
controllerAs: 'teamsq',
controller: function($http, $log, userInfo) {
var self = this;
userInfo.then(function(answer) {
var sid = answer.data.data.current_team.sid;
var tid = answer.data.data.current_team.tid;
self.team = [];
self.bang = 'shirin';
$http.get(webservice + "/team?token=" + token + "&team_id=" + tid + '&season_id=' + sid).success(function(response) {
var players = response.data.players;
angular.forEach(response.data.players, function(player) {
player['imageURL'] = "http://sdm.tarafdari.com/sites/default/files/players/150x150/" + player.pid + ".png";
});
self.team = response.data;
});
});
}
};
});
これが私のhtmlです：
<tabset>
<tab heading="Details">
...
</tab>
<tab heading="Other infos">
<teamsq></teamsq>
</tab>
</tabset>
teamqディレクティブが必要です。「その他の情報」タブが選択されている場合にのみリクエストしてください。
ディレクティブを少し編集しました。tabディレクティブでactionlocal sopeを使用して、ディレクティブを外部関数にバインドしました。
sdmtap.directive('tab', function() {
return {
restrict: 'E',
transclude: true,
template: '<div role="tabpanel" ng-show="active" ng-transclude></div>',
require: '^tabset',
scope: {
heading: '@',
action: '&'
},
link: function(scope, elem, attr, tabsetCtrl) {
scope.active = false;
tabsetCtrl.addTab(scope);
}
};
});
タブセットディレクティブテンプレートで、select関数の横にあるタブのng-clickにアクションプロパティを追加します。
<a href="" role="tab" ng-click="tabset.select(tab);tab.action()">{{tab.heading}}</a>
元のテンプレートでは、showSquads（）関数をアクションプロパティとしてディレクティブに追加します
<tab action="showSquads()" heading="{{'Team Squads'| translation}}">
コントローラーでshowSquads（）関数を作成します。タブをクリックすると、タブ機能以外のカスタム関数をすべてのタブで実行できるようになりました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加