Jak dynamicznie ładować wiele szablonów za pomocą AngularJS?

Question

Jestem nowy w AngularJS, pochodzę z tła PHP, gdzie wykonuję wszystkie agregacje szablonów na serwerze. W PHP chciałbym pobrać kilka szablonów, połączyć je razem, a następnie wysłać do przeglądarki klienta. AngularJS pozwala mi wstawić szablon za pomocą ng-view. To jest świetne, ale nie obsługuje przypadku, w którym wstawiany szablon może zawierać tagi, które są symbolami zastępczymi dla innych szablonów. Na przykład, może mam następujący jako jeden z moich szablonów:

<div class="some_class"> 
    <div class="another_class"> 
     {content} 
    </div> 
</div> 

W PHP chciałbym wstawić ten szablon, a następnie zastąpić zawartość {content} z innego szablonu. W AngularJS wiem, jak wstawić główny szablon (używając ng-view), ale nie jestem pewien, jak dynamicznie załadować mój "częściowy szablon" do tagu {content}. Jak to zrobić z AngularJS?

Answer 1

Prosty podejście byłoby użyć ngInclude directive:

<div class="some_class"> 
    <div class="another_class"> 
    <ng-include src="templatePath"></ng-include> 
    </div> 
</div> 

Następnie w kontroler, który jest powiązany z tym szablonie można zdefiniować zmienną templatePath Dynamicznie

function MyCtrl($scope){ 
    $scope.templatePath = // define this var dynamically here 
} 

Answer 2

Użycie ng-view do zagnieżdżania wielu szablonów nie jest obecnie obsługiwane natywnie w pliku Angular.js. Istnieje jednak wiele opcji do emulowania tej funkcjonalności. Zobacz odpowiedzi w this SO question dla kilku z tych opcji, w tym dla interfejsu użytkownika sugerowanego przez akonsu.