Question

我的Angular应用程序中有一组选项卡，每个选项卡都有自己的指令。与这些指令中的每一个相关联的控制器包含init()函数，因此每个控制器在页面加载时调用其各自控制器的init()函数内的函数。

我想要做的只是在页面加载时触发可见标签的init()功能。一些其他选项卡包含大量数据，如果用户永远不会最终点击它们，那么在页面加载时加载它们是一种浪费。

我可以简单地将ng-click附加到其他标签，只在点击标签时触发各自的init()功能（如下所示），还是有更好的方法？

<tabset>
  <tab>
    <gm-players></gm-players>
  </tab>
  <tab ng-click="loadGames()">
    <gm-games></gm-games>
  </tab>
  <tab ng-click="loadLeagues()">
    <gm-leagues></gm-leagues>
  </tab>
</tabset>

我的可行方法：与gm-players相关联的控制器在页面加载时触发，与gm-games和gm-leagues关联的控制器仅在单击相应的选项卡时触发。

Answer 1

这种情况似乎非常适合ui-router's。这样，只有当它们对应的选项卡打开时，才会初始化控制器。它保持陈述性和清洁：）

例如：

myapp.config(function($stateProvider, $urlRouterProvider){

  // For any unmatched url, send to /route1
  $urlRouterProvider.otherwise("/games")

  $stateProvider
    .state('games', {
        url: "/games",
        templateUrl: "route1.html",
        controller: function($scope){
          console.log('Games initialized');
          $scope.items = ["A", "List", "Of", "Items"];
        }
    })
    .state('leagues', {
        url: "/leagues",
        templateUrl: "route2.html",
        controller: function($scope){
          console.log('Leagues initialized');
          $scope.things = ["A", "Set", "Of", "Things"];
        }
    })
})

Plunker

等待启动控制器，直到单击选项卡

1 个答案: