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

216

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

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

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

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

  • 1
    это в основном точка маркировки для того, что вы вставляете для конкретного HTML-тега или директивы. используйте это с директивой, и вы поймете это лучше.
Теги:
angularjs-directive
transclusion

2 ответа

393
Лучший ответ

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

Изображение 3681

Визуализировать:

Изображение 3682

Поделиться
  • 82
    Это гораздо лучшее описание, чем их официальные документы. Это заставляет мою голову болеть.
  • 4
    Отличный ответ! :) Ссылка, которой вы поделились, помогает мне понять процесс transclude .
Показать ещё 5 комментариев
3

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

Поделиться
  • 8
    Вы не добавили ничего, чтобы сделать объяснение более понятным ...
  • 3
    Главный ответ, который я считаю, идеален, но если вы пришли из рубинового фона, то я согласен, yield кажется хорошей аналогией.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню