AngularJS - Dynamiczne korzystanie z części w innych partiach

Question

Jestem stosunkowo młodym użytkownikiem AngularJS i chciałbym wiedzieć, w jaki sposób można dynamicznie pobierać częściowe szablony. Rozważmy ten abstrakcyjny (i uproszczony na ten przykład) moduł. Samo to byłoby częściowym szablonem, który zostanie ponownie wykorzystany w całej aplikacji.

Częściowa Moduł Markup

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

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

</div> 

Po ściągam trochę po stronie klienta dane mogą życzę module.content być prosty ciąg tekstu, bez żadnych problemów. Byłoby użyteczne, gdybym mógł dynamicznie wstawiać inne częściowe szablony do module.content na podstawie danych, z którymi pracuję. Powiedz np. W mojej odpowiedzi Mam listę nagłówków, które chcę wyświetlić, czy możliwe jest wciągnięcie częściowego szablonu, który obsługuje nagłówki? A w innym miejscu, module.content może być szablonem częściowym, który obsługuje galerię obrazów.

Dowolne wejście lub kierunek będą bardzo mile widziane!

Answer 1

Dostępnych jest kilka metod.

Najlepiej jest dodać własną directive. Rozszerzając swój przykład:

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

Będziemy używać narzędzia transclusion w celu zwiększenia elastyczności treści. Teraz częściowy:

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

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

Po zainstalowaniu tej dyrektywy, można użyć następującego kodu HTML:

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

Inną opcją jest użycie dyrektywy ng-include. Jest to prosty szablon częściowego, z tą różnicą, że dołączany częściowe mieszka w tym samym zakresie, jak w kontekście została włączona.

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

W powyższym przypadku, kątowa będzie transclude cząstkowe na URL w $scope.module.partialUrl. (Edycja: oznacza to, że można dynamicznie zastępować interfejsy użytkownika, zastępując zmienną zakresu używaną przez polecenie ngInclude. Niesamowite, prawda?)

Jeśli po prostu używasz tego samego fragmentu, aby uniknąć powtarzania kodu, po prostu otocz adres URL w jednym Cytaty:

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