<md-tab-content>タグの下にui-viewを使用してください

Question

ng-repeatを使用して生成された角材料タブのリストがあります。

<md-tabs> 
    <md-tab label="Home" ui-sref="home"> 
     <md-tab-body> 
      <div ui-view="home"></div> 
     </md-tab-body> 
    </md-tab> 
    <md-tab ng-repeat="cat in categories" label="{{cat.title}}" ui-sref="category({categoryName:cat.title, catID:cat.catID})"> 
     <md-tab-body> 
      <h3> 
       {{cat.title}} 
      </h3> 
      <div ui-view="categories"></div> 
     </md-tab-body> 
    </md-tab> 
</md-tabs> 

私は、config機能の各ビューに対して別々のコントローラを用意しました。

Refer this link for the code

あなたがコードを実行すると、あなたは大丈夫ですHomeControllerが一度呼び出されるHomeタブ、をクリックの上にこれを遵守します。しかし、他のタブをクリックすると、Tab1と言うと、CategoriesControllerが各タブごとに1回、7回呼び出されます。これは、私がテキストを印刷した開発者モードのコンソールで見ることができます。

私は<md-tab-body></md-tab-body>の下にある<div ui-view></div>の結果としてこのことが発生することを理解します。すべてのタブのコントローラーを呼び出します。これは、Tab1の本文を表示したいときに、コントローラーから計算を7回行い、実際には各タブの本文をTab1の内容で埋めることになりますが、隠されます。

私はこれが起こりたくありません。タブをクリックすると、コントローラの1つのインスタンスだけが呼び出され、そのタブの内容だけを入力する必要があります。

これを達成する方法はありますか？私は回避策を使用してjsFiddle here編集した

編集は以下の回答で示唆されました。しかし、まだCategoriesControllerが2回呼び出されています。これにより、不要な計算が行われます。それを避ける良い方法はありますか？

コントローラーの呼び出しを防ぐために、_willBeDestroyedプロパティを使用することを考えました。しかし、このプロパティはコントローラの呼び出しの前に私の手にはありません。

ご協力いただければ幸いです。ここで

Answer 1

のソリューションです - JsFiddle

変更点は次のとおりです。今、2つだけの最大呼び出さ

• <md-tabs md-selected="selectedTab">

• <div ui-view="categories" ng-if="selectedTab===cat.catID">

categoriesController

編集：

を$stateParamsが$scope.selectedTabに対してチェックすることができ、不要な計算を避けるためにあなたが見ることができるようにのみ選択されたタブ（タブ2）の体が満たされた回数が、重要な部分ですコントローラー内で - Fiddle