仅当在 angularjs 中选择选项卡时如何调用函数（或指令）？

Question

我是 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 指令，只有在我的“其他信息”选项卡被选中时才请求。

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 将指令绑定到外部函数，

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

并且只是在我的 tabset 指令模板中，我将 action 属性添加到我的选项卡的 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() 函数，现在当我单击我的选项卡时，除了选项卡功能之外，我的自定义函数可以为每个选项卡运行

这是plunker