複数のタブを持つ角型の単一ページアプリケーションデータ制限

Question

複数のタブを持つ角度のある材質のアプリケーションがあります。私はすぐにすべてのデータを読み込まないようにしています。私は、現在のタブに必要なデータだけをロードしたいと思います。これを達成する最良の方法は何ですか。私はページ全体のコントローラとすべてのタブのコントローラを持つディレクティブを持っています。私はonTabChangesイベントを使用しようとしたが、ディレクティブは、このイベントをキャッチしていない

HTMLコード

<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コード

<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イベントでこのサービスを呼び出します。