Co to jest ng-tranclude?

266

Widziałem wiele pytań dotyczących StackOverflow omawiających ng-tranclude, ale żadne z nich nie wyjaśniło laikom, co to jest.

Opis w dokumentacji jest następujący:

Dyrektywa oznaczająca punkt wstawienia transkomentowanej DOM najbliższej dyrektywy nadrzędnej, która korzysta z transkluzji.

To dość mylące. Czy ktoś byłby w stanie wyjaśnić w prosty sposób, co ma na celu transkrypcja ng i gdzie może być wykorzystana?

angularjs angularjs-directive transclusion Zaklinacz kodów
źródło

jest to w zasadzie punkt oznaczający wszystko, co wstawiasz dla określonego znacznika lub dyrektywy HTML. użyj go z dyrektywą, a zrozumiesz go lepiej.

Odpowiedzi:

492

Transclude to ustawienie pozwalające kątowi uchwycić wszystko, co jest umieszczone w dyrektywie w znacznikach i użyć go gdzieś _{(gdzie tak naprawdę ng-transcludejest)} w szablonie dyrektywy. Przeczytaj więcej na ten temat w sekcji Tworzenie dyrektywy, która otacza inne elementy dotyczące dokumentacji dyrektyw .

Jeśli piszesz niestandardową dyrektywę, używasz ng-tranclude w szablonie dyrektywy, aby zaznaczyć punkt, w którym chcesz wstawić zawartość elementu

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Jeśli umieścisz to w swoim znaczniku

<hero name="superman">Stuff inside the custom directive</hero>

Wygląda to tak:

Nadczłowiek

Rzeczy wewnątrz niestandardowej dyrektywy

Pełny przykład:

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

Wizualizuj:

Ben Fischer
źródło

To jest znacznie lepszy opis niż ich oficjalne dokumenty. Ten powoduje ból głowy.

Capaj

Świetna odpowiedź! :) Udostępniony link pomaga mi zrozumieć proces transclude.

Paulo Oliveira

Angular powinien użyć tego wyjaśnienia zamiast dokumentów, które obecnie mają.

Jeremy W

@codeofnode jego usługa kompilacji kątowej, oto odpowiedni kod github.com/angular/angular.js/blob/…

Ben Fischer

Odpowiedzi

Stackoverflow

jest to rodzaj wydajności, wszystko z elementu.html () jest tam renderowane, ale atrybuty dyrektywy są nadal widoczne w pewnym zakresie.

Sîrbu Nicolae-Cezar
źródło

Najlepsza odpowiedź, którą uważam za idealną, jest idealna, ale jeśli pochodzisz z rubinowego tła, zgadzam się, yieldwydaje się być dobrą analogią.

Apie

@Apie tak, pochodzę z rubinowego środowiska

Sîrbu Nicolae-Cezar