Коли використовувати transclude 'true' та transclude 'element' у Angular?

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

Я був би радий, якби хтось міг пояснити це простою мовою. Яка перевага кожного варіанту? Яка між ними реальна різниця?

Це те, що я знайшов:

transclude: true

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

і

transclude: ‘element’

Це виключає весь елемент і в функції компіляції вводиться функція зв'язування transclude. Тут ви не можете мати доступ до області, оскільки область ще не створена. Функція компіляції створює функцію зв’язку для директиви, яка має доступ до сфери застосування, а transcludeFn дозволяє торкатися клонованого елемента (який було включено) для маніпуляції з DOM або використання даних, пов'язаних з рамками в ньому. Для вашої інформації це використовується в ng-повторі та ng-перемикачі.

З документації AngularJS про директиви :

transclude- скласти вміст елемента і зробити його доступним для директиви. Зазвичай використовується з ngTransclude. Перевага виключення полягає в тому, що функція зв'язування отримує функцію переключення, яка попередньо пов'язана з правильною областю. У типових налаштуваннях віджет створює область ізоляції, але переключення - це не дочірня, а побратима області ізоляту. Це дає можливість віджету мати приватний стан, а переключення прив'язуватися до батьківського (попереднього ізоляції) сфери.

true - виключити зміст директиви.

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

transclude: вірно

Тож скажімо, у вас є директива, яка називається 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: 'елемент'

Якщо у вас є директива, яка називається 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директивою , яка робить це для вас.

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

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


<div directive-name>world</div>

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

Найкращий спосіб подумати про переключення - це Frame Frame. Рамка для малюнків має власний дизайн та місце для додавання зображення. Ми можемо вирішити, яка картина буде міститись всередині неї.

Коли мова заходить про кутовий, у нас є якийсь контролер з його сферою дії, і всередині цього ми розмістимо директиву, яка підтримує переключення. Ця директива матиме власний дисплей та функціональність. У непередаваній директиві зміст всередині директиви визначається самою директивою, але при виключенні, як і рамка для картини, ми можемо вирішити, що буде всередині директиви.

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>

Приклад