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

Question

我是 angularjs 的新手，我的页面有 2 tabs.I 使用指令创建选项卡，我使用 $http 从我的 server.my 问题中获取 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 指令，只有在我的 'other info' 选项卡被选中时才请求。

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

我在我的指令中做了一些编辑，我在我的选项卡指令中使用了 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 指令模板中，我将操作属性添加到 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() 函数，现在当我单击我的选项卡时，除了选项卡功能之外，我的自定义函数可以是运行每个选项卡

这是一个plunker

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

how to call a function (or directive) only when tab is selected in angularjs?

jquery

angularjs

angularjs-directive

angular-directive