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

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

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

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

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

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

Ответы

Ответ 1

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

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

true - трансляция содержимого директивы.

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

transclude: true

Итак, скажем, у вас есть директива с названием 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> {{..., передается и доступен директиве.

transclude: 'element'

Если у вас есть директива с именем 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, которая сделает это для вас.

Ответ 2

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

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


<div directive-name>world</div>

браузер: "Привет, мир".

Ответ 3

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

Когда дело доходит до 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>

Пример