Question

我是angularjs的新手，我有2个tab的页面。我使用指令创建标签，我使用$ 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>

我想要teamsq指令，只在我的其他信息时提出要求。选项卡已被选中。

Answer 1

我想您只想发出一次请求（第一次用户点击它）。

您可以将属性绑定到指令teamsq范围，例如loadContent：

scope: {
    loadContent: '='
},

对于标签other info，请传入<teamsq load-content="actions.loadOtherInfo"></teamsq>。这里actions.loadOtherInfo是外部控制器的属性。将ng-click添加到标签other info，点击它会将actions.loadOtherInfo设置为true。在指令teamsq内，只需使用：

if (scope.loadContent && !scope.isLoaded) {
    scope.isLoaded = true;
    $http.get(webservice + "/team?token=" + token + "&team_id=" + tid + '&season_id=' + sid).success(function(response) {
        // ...
    });
}

ng-if每次都会破坏并重新创建DOM结构（因此每次都会启动指令），我认为这不是一个很好的解决方案。

Answer 2

我在我的指令中进行了一些编辑，我在tab指令中使用了action local sope来将我的指令绑定到外部函数，

Comp1       Jennifer    4920225088    55443  
Comp3       Jennifer    ''            55443

只需在我的tabset指令模板中，我就可以在select函数旁边的ng选项卡中添加action属性：

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);
    }
  };
});

在原始模板中，我将showSquads（）函数添加为指令

的动作属性

<a href="" role="tab" ng-click="tabset.select(tab);tab.action()">{{tab.heading}}</a>

并在我的控制器中创建showSquads（）函数，现在当我单击我的选项卡时，除了选项卡功能之外，我的自定义函数可以为每个选项卡运行

这是一个plunker

如何在angularjs中选择tab时调用函数（或指令）？

2 个答案: