Що таке ng-transclude?

266

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

Опис у документації такий:

Директива, яка позначає точку вставки для включеної DOM найближчої батьківської директиви, яка використовує переключення.

Це досить заплутано. Чи зможе хтось простим словом пояснити, що призначено робити ng-transclude і де воно може бути використане?

angularjs angularjs-directive transclusion

— Шепіт коду
джерело

це в основному точка відмітки для того, що ви вставляєте для конкретного тегу html або директиви. використовуйте його з директивою, і ви зрозумієте це краще.

— za

Відповіді:

492

Transclude - це налаштування, щоб вказати кутовий, щоб зафіксувати все, що розміщено всередині директиви в розмітці, і використовувати її десь _{(Де насправді 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

Візуалізуйте:

— Бен Фішер
джерело

Це набагато кращий опис, ніж їх офіційні документи. Це болить мені голова.

— Капай

Чудова відповідь! :) Посилання, яким ви поділилися, допоможе мені зрозуміти процес transclude.

— Пауло Олівейра

Angular повинен використовувати це пояснення замість документів, які вони мають.

— Jeremy W

@codeofnode служба компіляції його кутових, ось відповідний код github.com/angular/angular.js/blob/…

— Бен Фішер

Відповіді Stackoverflow - найкращий спосіб

— підкреслити

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

— Sîrbu Nicolae-Cezar
джерело

Верхня відповідь, яку я вважаю, є ідеальною, але якщо ви приїжджаєте з рубінового фону, то я згоден, yieldздається, хороша аналогія.

— Апі

@Apie yea, я походжу з рубінового фону

— Sîrbu Nicolae-Cezar