AngularJS - Dynamische Verwendung von Partials in anderen Partials

Question

Ich bin relativ neu in AngularJS und möchte wissen, wie machbar es ist, partielle Templates dynamisch einzuziehen. Betrachten Sie dieses abstrahierte (und für dieses Beispiel vereinfachte) Modul. Dies selbst wäre eine teilweise Vorlage, die in der gesamten Anwendung wiederverwendet wird.

Teilmodul Markup

<div class="module"> 
    <h2 class="module-title">{{module.title}}</h2> 

    <div class="module-content"> 
     {{module.content}} 
    </div> 

</div> 

Nachdem er einige Daten Client-Seite zu holen, kann ich für module.content wünsche ein einfacher Text-String zu sein, es gibt keinerlei Probleme. Was wäre nützlich, wenn ich andere Teilvorlagen dynamisch in module.content basierend auf den Daten, mit denen ich arbeite, einfügen könnte. Sagen Sie zum Beispiel in meiner Antwort habe ich eine Liste von Schlagzeilen, die ich anzeigen möchte, ist es möglich, eine Teilvorlage einzuziehen, die Überschriften behandelt? Und an einer anderen Stelle könnte module.content eine Teilvorlage sein, die eine Galerie von Bildern handhabt.

Jede Eingabe oder Richtung würde sehr geschätzt werden!

Answer 1

Ihnen stehen einige Vorgehensweisen zur Verfügung.

Ihre beste Wette ist, Ihre eigene hinzuzufügen. Erweitern Ihres Beispiels:

module.directive('myModule', function() { 
    return { 
    restrict: 'A', 
    scope : { 
     title : '@' 
    }, 
    templateUrl : '/partial/module.html', 
    transclude : true 
    }; 
}); 

Wir verwenden die Einfügung, um den Inhalt flexibler zu gestalten. Nun ist der Teil:

<div class="module"> 
    <h2 class="module-title">{{title}}</h2> 

    <div class="module-content" ng-transclude></div> 
</div> 

diese Richtlinie installiert ist, können Sie den folgenden HTML verwenden:

<div my-module title="{{module.title}}"> 
    {{module.content}} 
</div> 

Eine weitere Option ist die ng-include Richtlinie zu verwenden. Dies ist eine einfache Einbindung eines Teils, wobei der Unterschied, dass das transkludiert Teil Leben im gleichen Umfang wie der Kontext wurde in enthalten.

<div ng-include="module.partialUrl"></div> 

Im obigen Fall, Angular die teilweise unter der URL transcluden an $scope.module.partialUrl. (Edit: das bedeutet, dass Sie UIs dynamisch ersetzen können, indem Sie die von ngInclude verwendete Bereichsvariable ersetzen. Awesome, richtig?)

Wenn Sie nur die gleichen Partialwiederholungen verwenden, um sich wiederholenden Code zu vermeiden, dann umgeben Sie einfach die URL in einem einzigen Zitate:

<div ng-include="'/partial/foo.html'"></div>