Что такое ng-transclude?

266

Я видел несколько вопросов о StackOverflow, обсуждающих ng-transclude, но ни один из них не объяснял с точки зрения непрофессионала, что это такое.

Описание в документации выглядит следующим образом:

Директива, которая отмечает точку вставки для включенного DOM ближайшей родительской директивы, которая использует transclusion.

Это довольно запутанно. Сможет ли кто-нибудь объяснить простыми словами, для чего предназначен ng-transclude и где его можно использовать?

Код Whisperer
источник
1
это в основном точка маркировки для того, что вы вставляете для конкретного тега или директивы html. используйте это с директивой, и вы поймете это лучше.
ZA

Ответы:

492

Transclude - это параметр, который указывает angular захватывать все, что помещено в директиву в разметке, и использовать ее где-то (где на самом деле ng-transcludeэто значение) в шаблоне директивы. Подробнее об этом читайте в разделе « Создание директивы, которая включает другие элементы » в документации по директивам .

Если вы пишете пользовательскую директиву, вы используете ng-transclude в шаблоне директивы, чтобы отметить точку, в которую вы хотите вставить содержимое элемента

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

Если вы положите это в вашей разметке

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

Это будет отображаться как:

сверхчеловек

Материал внутри пользовательской директивы

Полный пример:

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

введите описание изображения здесь

Визуализируйте:

введите описание изображения здесь

Бен Фишер
источник
90
Это намного лучшее описание, чем их официальные документы. Это заставляет мою голову болеть.
Капай
4
Отличный ответ! :) Ссылка, которой вы поделились, помогает мне понять процесс transclude.
Пауло Оливейра
10
Angular должен использовать это объяснение вместо документов, которые они имеют в настоящее время.
Джереми W
1
@codeofnode сервис компиляции его angular, вот соответствующий код github.com/angular/angular.js/blob/…
Бен Фишер
1
Ответы Stackoverflow - лучший способ недопонимания угловых понятий
sridhar ..
1

это своего рода выход, все из element.html () отображается там, но атрибуты директивы все еще видны в определенной области видимости.

Сырбу Николае-Цезарь
источник
3
Главный ответ, который я считаю, идеален, но если вы пришли из рубинового фона, то я согласен, yieldкажется хорошей аналогией.
Апи
2
@ Да, я родом из рубина
Сырбу Николае-Цезарь,