Как использовать функцию "заменить" для пользовательских директив AngularJS?

Question

Почему 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

Answer 1

Когда у тебя есть 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

Посмотрите это, чтобы узнать больше о трансляции.

Answer 2

replace:true устарела

Из документов:

replace ([УСТАРЕЛО!] Будет удалено в следующем основном выпуске - т.е. v2.0)

укажите, что шаблон должен заменить. По умолчанию false,

• true - шаблон заменит элемент директивы.
• false - шаблон заменит содержимое элемента директивы.

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

Из GitHub:

Caitp-- Это устарело, потому что есть известные, очень глупые проблемы с replace: true, число которых не может быть исправлено разумным образом. Если вы будете осторожны и избежите этих проблем, тогда у вас будет больше возможностей, но в интересах новых пользователей легче просто сказать им: "это даст вам головную боль, не делайте этого".

- AngularJS Issue # 7636