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

Posted 2023-02-22

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

【英文标题】：how to call a function (or directive) only when tab is selected in angularjs?

【发布时间】：2015-10-17 09:23:28

【问题描述】：

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

【问题讨论】：

您可以在“其他信息”选项卡上尝试 ng-if 条件。如果选择了选项卡，那么它只会调用teamsq指令。

@MansiParekh 我是 Angular 新手，您能说得更具体些吗？？

你怎么知道在页面上选择了哪个标签？

【参考方案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 结构（因此每次都会启动指令），我认为这对您来说不是一个好的解决方案。

【讨论】：

我将 loadContent 添加到 teamsq 指令和 load-content="loadOtherInfo"，但是如何在我的 ng-click 中将 loadContent 设置为 true？看到我将 ng-click 设置为选项卡，tabset 指令上的功能选择是在单击选项卡时调用的。如何将 loadContent 设置为 ture？

哦，directive two-way binding 确保当您在指令之外更改 loadOtherInfo 时，指令将收到更新后的值 loadContent 并更新视图。 （当然，最好使用一些对象来绑定，比如actions.loadOtherInfo）。

我的问题是我不知道如何更改它 :( 在我的指令控制器 loadContent='test2' 中更改我模板中 loadOtherInfo 中的任何内容，您能帮帮我吗？跨度>

哦，你从内部指令改变？然后使用对象绑定：actions.loadOtherInfo。参考：Understanding Scopes

感谢@joy，您帮我解决了我的问题，但我无法正确理解您的意思，也无法以您的方式解决我的问题，+1 为您提供帮助 ;)

【参考方案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