Когда использовать transclude «true» и transclude «element» в Angular?

Когда я должен использовать transclude: 'true' и когда transclude: 'element'? Я не могу найти ничего о transclude: 'element' в документах angular, они довольно запутаны.

Буду рад, если кто-нибудь объяснит это простым языком. В чем преимущество каждого варианта? В чем реальная разница между ними?

Вот что я нашел:

transclude: true

Внутри функции компиляции вы можете манипулировать DOM с помощью функции связывания transclude или вы можете вставить включенный DOM в шаблон с помощью директивы ngTransclude для любого HTML-тега.

и

transclude: ‘element’

Это включает весь элемент, и в функцию компиляции вводится функция связывания включения. Вы не можете иметь доступ к области здесь, потому что область еще не создана. Функция компиляции создает функцию ссылки для директивы, которая имеет доступ к области видимости, а transcludeFn позволяет вам коснуться клонированного элемента (который был включен) для манипулирования DOM или использовать в нем данные, привязанные к области видимости. К вашему сведению, это используется в ng-repeat и ng-switch.


angularjs angularjs-directive angularjs-ng-transclude
person LauroSkr    schedule 26.08.2013    source источник

Ответы (3)


arrow_upward
231
arrow_downward

Из Документация по директивам AngularJS:

transclude — скомпилировать содержимое элемента и сделать его доступным для директивы. Обычно используется с ngTransclude. Преимущество включения состоит в том, что функция связывания получает функцию включения, предварительно связанную с правильной областью действия. В типичной настройке виджет создает изолируемую область, но включение является не дочерним, а дочерним элементом изолированной области. Это позволяет виджету иметь приватное состояние, а включение должно быть привязано к родительской (предварительно изолированной) области.

true - включить содержимое директивы.

'element' - включить весь элемент, включая любые директивы, определенные с более низким приоритетом.

включить: правда

Допустим, у вас есть директива my-transclude-true, объявленная с помощью transclude: true, которая выглядит так:

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

После компиляции и перед связыванием это становится:

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

Содержимое (дочерние элементы) my-transclude-true, которое является <span>{{ something }}</span> {{..., включено и доступно директиве.

включить: 'элемент'

Если у вас есть директива с именем my-transclude-element, объявленная с помощью transclude: 'element', она выглядит так:

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

После компиляции и перед связыванием это становится:

<div>
   <!-- transcluded -->
</div>

Здесь элемент целиком, включая его дочерние элементы, включается и становится доступным для директивы.

Что происходит после связывания?

Это зависит от вашей директивы, чтобы сделать то, что нужно сделать с функцией transclude. ngRepeat использует transclude: 'element', чтобы он мог повторять весь элемент и его дочерние элементы при изменении области видимости. Однако, если вам нужно только заменить тег и сохранить его содержимое, вы можете использовать transclude: true с директивой ngTransclude, которая сделает это за вас.

person sirhc    schedule 27.08.2013
comment
Я как бы пропустил утверждение made available to the directive. Элемент всегда доступен директиве. не могли бы вы уточнить это? - person guy mograbi; 21.10.2013
comment
@guymograbi Это предложение может иметь больше смысла, поскольку оно доступно для директивы через функцию, предварительно привязанную к правильной области действия. - person Michelle Tilley; 14.02.2014
comment
Как можно было бы модульно протестировать директиву с преобразованием, равным «элементу»? В настоящее время я борюсь с этой проблемой. Кажется, я не могу получить доступ к элементу после того, как он был включен. - person Chester Rivas; 05.08.2015

arrow_upward
33
arrow_downward

Если установлено значение true, директива удалит исходный контент, но сделает его доступным для повторной вставки в ваш шаблон с помощью директивы ng-transclude.

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true
    };
});


<div directive-name>world</div>

рендер браузера: «Привет, мир».

person Community    schedule 26.08.2013
comment
Это вообще не отвечает на вопрос (о разнице между transclude: true и transclude: element) - person Jasper; 04.09.2014
comment
Также было бы интересно, какие теги DOM браузера имеет после директивы, а не то, что она читает... - person kontur; 09.02.2015

arrow_upward
8
arrow_downward

Лучший способ подумать о включении — это рамка изображения. Рамка изображения имеет собственный дизайн и место для добавления изображения. Мы можем решить, какое изображение будет помещено в него.введите здесь описание изображения

Когда дело доходит до angular, у нас есть какой-то контроллер со своей областью видимости, и внутри него мы поместим директиву, поддерживающую включение. Эта директива будет иметь собственное отображение и функциональность. В директиве без перевода содержание внутри директивы определяется самой директивой, но с трансклюзией, как и с рамкой изображения, мы можем решить, что будет внутри директивы.

angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"frame.html",
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
        },
        transclude:true


    }

});

Содержимое внутри директивы

<div class="well" style="width:350px;" ng-hide="hidden">

  <div style="float:right;margin-top:-15px">
    <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> 
  </div>
  <div ng-transclude>
    /*frame content goes here*/
  </div>
</div>

Директива вызова

<body ng-controller="appController">
    <my-frame>
      <span>My Frame content</span>
    </my-frame>
  </body>

Пример

person Code-EZ    schedule 30.08.2016
comment
Тем не менее я не понял трансклюзии, может у вас есть какая-нибудь простая программа, чтобы проиллюстрировать это? - person Raja; 11.10.2017