Verwenden Sie ui-view unter <md-tab-content> Tag

Question

Ich habe eine Liste von eckigen Material-Registerkarten, die mit ng-repeat erzeugt werden.

<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> 

I haben separate Controller vorgesehen für jede der Ansichten in der config Funktion.

Refer this link for the code

Wenn Sie den Code ausführen, werden Sie beobachten, dass auf der Home Registerkarte klicken die HomeController einmal aufgerufen wird, was in Ordnung ist. Wenn Sie jedoch auf eine andere Registerkarte klicken, z. B. Tab1, wird die CategoriesController 7 Mal aufgerufen, einmal für jede Registerkarte. Dies kann in der Konsole des Entwicklermodus gesehen werden, wo ich einen Text ausgedruckt habe.

Ich verstehe, dass dies als Ergebnis von <div ui-view></div>, die unter <md-tab-body></md-tab-body> anwesend ist passiert. Es ruft den Controller für jede Registerkarte auf. Dies bedeutet auch, wenn ich Körper von Tab1 anzeigen möchte, wird es Berechnungen vom Controller 7 mal machen und tatsächlich den Körper jeder Registerkarte mit dem Inhalt Tab1 füllen, obwohl es versteckt werden wird.

Ich möchte nicht, dass dies geschieht. Beim Klicken auf eine Registerkarte muss nur eine Instanz der Steuerung aufgerufen werden und nur der Inhalt dieser Registerkarte muss ausgefüllt werden.

Gibt es einen Weg, dies zu erreichen?

bearbeiten ich unten in der Antwort bearbeitet haben vorgeschlagen, die jsFiddle here die Abhilfe verwenden. Jedoch wird immer noch die CategoriesController zweimal angerufen. Dies wird zu unnötigen Berechnungen führen. Gibt es einen guten Weg, es zu vermeiden?

Ich dachte an _willBeDestroyed Eigenschaft zu verwenden, um den Aufruf von Controller zu verhindern. Aber diese Eigenschaft ist nicht in meinen Händen vor dem Aufruf des Controllers.

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Hier ist eine Lösung - JsFiddle

Die Änderungen sind:

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

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

categoriesController jetzt wird nur maximal zwei genannt Zeiten, aber der wichtige Teil ist, dass der Körper nur die ausgewählten Registerkarte (Tab 2) gefüllt ist, wie Sie sehen können:

Edit:

Um unnötige Berechnung zu vermeiden $stateParams gegen $scope.selectedTab geprüft werden in der Steuerung - Fiddle