Question

我有一个带有多个标签的角度材质应用程序。我试图不立即加载所有数据。我想加载当前标签所需的数据。实现这一目标的最佳方法是什么。我有一个控制器用于整个页面和指令，每个选项卡都有控制器。我尝试使用onTabChanges事件，但指令不捕获此事件

HTML CODE

<div ng-controller="AdminController as ctrl" class="md-content" ng-cloak>
  <md-tabs flex md-dynamic-height md-border-bottom md-stretch-tabs="auto">
    <md-tab label="One" md-on-select="onTabChanges(1)">
      <tab-One></tab-One>
    </md-tab>
    <md-tab label="Two" md-on-select="onTabChanges(2)">
      <tab-Two></tab-Two>
    </md-tab>
    <md-tab label="Three" md-on-select="onTabChanges(3)">
      <tab-Three></tab-Three>
    </md-tab>
  </md-tabs>
</div>

JS CODE

<script>    
MyApp.controller('AdminController', function ($scope) {
  $scope.onTabChanges = function (currentTabIndex) {
    $scope.globalVar = currentTabIndex;
  }
}

MyApp.directive('tabOne', function ($location) {
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: "../HtmlTemplates/one.html",
    controller: function ($scope, $http) {
      if ($scope.globaVar === 1) {
        Do something
      }
    }
  }
}
</script>

Answer 1

嗯，除非在您的应用中的任何其他地方使用此内容模板，否则您不需要每个标签内容的指令。

如果这个指令是谁加载数据，那么每个指令都会在渲染时（也就是进入状态时）执行。无论如何，如果发生这种情况，可能您没有正确分割组件的职责，指令主要是定义模板。

带来从这些指令中获取数据并将其投入使用的逻辑。然后在onTabChange事件中调用此服务，就像你正在做的那样。

角度材料单页面应用程序，具有多个选项卡数据限制

1 个答案: