Як використовувати функцію `` замінити '' для користувальницьких директив AngularJS?

Question 1

Чому код replace=trueчи replace=falseне впливає на код нижче?

Чому "деякий наявний вміст" не відображається, коли replace = false?

Або, висловлюючи це більш покірно, чи можете ви люб’язно пояснити, що є replace=true/falseфункцією в директивах і як її використовувати?

Приклад

JS / кутовий:

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

          })
          .directive('myDir', function() {
            return {
              restrict: 'E',
              replace: true,
              template: '<div>{{title}}</div>'
            };
      });
</script>

HTML:

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

Подивіться це в Plunker тут:

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview

Question 2

Коли у вас є, replace: trueви отримуєте такий шматок DOM:

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

тоді як replace: falseви отримаєте це:

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

Отже, replaceвластивість у директивах стосується того, чи повинен елемент (до якого застосовується директива) ( <my-dir>у такому випадку) залишатися ( replace: false), а шаблон директиви слід додавати як її дочірній елемент ,

АБО

елемент, до якого застосовується директива, повинен бути замінений ( replace: true) шаблоном директиви.

В обох випадках діти елемента (до якого застосовується директива) будуть втрачені. Якщо ви хочете зберегти оригінальний вміст елемента / дітей, вам доведеться його транслюдувати. Це зробить наступна директива:

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

У тому випадку, якщо в шаблоні директиви у вас є елемент (або елементи) з атрибутом ng-transclude, його вміст буде замінено оригінальним вмістом елемента (до якого директива застосовується).

Див. Приклад транслюзії http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

Дивіться це, щоб прочитати більше про транслюзію.

Question 3

`replace:true` є застарілим

З Документів:

replace ([ЗАСТОСОВАНО!], Буде видалено в наступному основному випуску - тобто v2.0)

вкажіть, що шаблон повинен замінити. За замовчуванням false.

true - шаблон замінить елемент директиви.

false - шаблон замінить вміст елемента директиви.

- AngularJS Комплексна директива API

З GitHub:

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

- Випуск AngularJS # 7636

Оновлення

Примітка: replace: trueзастарілий і не рекомендується використовувати, головним чином, через перелічені тут проблеми. Він був повністю видалений в новому Angular.

Проблеми із заміною: true

Для отримання додаткової інформації див

AngularJS $ compile Service API Reference - Проблеми з replace:true

Як використовувати функцію `` замінити '' для користувальницьких директив AngularJS?

replace:true є застарілим

Оновлення

Проблеми із заміною: true

`replace:true` є застарілим