Понимание опции transclude определения директивы?

Ответ 1

Рассмотрим директиву, называемую myDirective в элементе, и этот элемент включает другое содержимое, скажем:

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Если myDirective использует шаблон, вы увидите, что содержимое <div my-directive> будет заменено вашим шаблоном директивы. Итак, имея:

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

приведет к этому рендерингу:

<div class="something"> This is my directive content</div> 

Обратите внимание, что содержимое исходного элемента <div my-directive> будет потеряно (или лучше сказано, заменено). Итак, попрощайтесь с этими приятелями:

<button>some button</button>
<a href="#">and a link</a>

Итак, что, если вы хотите сохранить свои <button>... и <a href>... в DOM? Вам понадобится что-то, называемое заключением. Концепция довольно проста: Включить контент из одного места в другое. Итак, теперь ваша директива будет выглядеть примерно так:

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

Это сделает:

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

В заключение вы в основном используете transclude, когда хотите сохранить содержимое элемента, когда используете директиву.

Мой пример кода здесь http://jsfiddle.net/7LRDS/1/ Вы также можете воспользоваться: https://egghead.io/lessons/angularjs-transclusion-basics

Ответ 2

Я думаю, что важно отметить изменения в вышеуказанном поведении в новой версии AngularJS. Я потратил один час, пытаясь достичь вышеуказанных результатов с помощью Angular 1.2.10.

Содержание элемента с ng-transclude не добавляется, а полностью заменяется.

Итак, в приведенном выше примере, что вы бы достигли с помощью "transclude", было бы:

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

а не

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Спасибо.

Ответ 3

Что говорит TechExplorer, это правда, но вы можете иметь оба содержимого, включив в свой шаблон простой тег контейнера (например, div или span) с атрибутом ng-transclude. Это означает, что следующий код в вашем шаблоне должен включать весь контент

<div class="something"> This is my directive content <div class="something" ng-transclude></div></div>

Ответ 4

Из Wiki:

"В информатике переключение - это включение части или всего электронный документ в один или несколько других документов по ссылке."

Я хотел бы добавить еще одно использование для перехода, и это то, что он изменяет порядок выполнения функций компиляции и ссылок родительских и дочерних директив. Это может быть полезно, когда вы хотите скомпилировать дочерний DOM перед родительским DOM, поскольку родительский DOM, возможно, зависит от дочернего DOM. Эта статья идет более подробно и очень хорошо ее разъясняет!

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives-part-2-transclusion/

Ответ 5

Обновленная документация AngularJS 1.6.6 теперь имеет лучшее объяснение.

Transclude используется для создания директивы, которая обертывает другие элементы

Иногда желательно иметь возможность передавать весь шаблон, а не строку или объект. Скажем, что мы хотим создать компонент "диалогового окна". Диалоговое окно должно иметь возможность обернуть любой произвольный контент.

Для этого нам нужно использовать опцию transclude. См. Пример ниже.

script.js

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
  };
});

index.html

<div ng-controller="Controller">
  <my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>

мой-dialog.html

<div class="alert" ng-transclude></div>

Скомпилированный вывод

<div ng-controller="Controller" class="ng-scope">
  <my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>

Transclude делает содержимое директивы с этой опцией доступ к области вне директивы, а не внутри.

Это показано в предыдущем примере. Обратите внимание, что мы добавили функцию ссылки в script.js, которая переопределяет имя как Jeff. Обычно мы ожидаем, что {{name}} будет Джеффом. Однако в этом примере мы видим, что привязка {{name}} по-прежнему является Тобиасом.

Лучшая практика: используйте только transclude: true, когда вы хотите создать директиву, которая обертывает произвольный контент.

Ответ 6

transclude: true означает добавить все элементы, определенные в вашей директиве, с элементом шаблона вашей директивы.

Если transclude: false, эти элементы не включены в ваш окончательный html директивы, то отображается только шаблон директивы.

transclude: элемент означает, что ваш шаблон директивы не используется только определенным элементом в вашей директиве отображаются как html.

когда вы определяете свою директиву, тогда она должна быть ограничена E и когда вы добавляете ее на страницу, тогда

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.