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

Question 1

Почему replace=trueили replace=falseне оказывает никакого влияния в коде ниже?

Почему при replace = false не отображается «некоторый существующий контент»?

Или, говоря более скромно, не могли бы вы объяснить, что это за replace=true/falseфункция в директивах и как ее использовать?

пример

JS / Angular:

<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 - шаблон заменит содержимое элемента директивы.

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

Из GitHub:

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

- Проблема с AngularJS № 7636.

Обновить

Примечание: replace: trueустарел и не рекомендуется использовать, в основном из-за проблем, перечисленных здесь. Он был полностью удален в новом Angular.

Проблемы с replace: true

Для получения дополнительной информации см.

Справочник по API службы компиляции AngularJS $ - Проблемы с replace:true

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

replace:true не рекомендуется

Обновить

Проблемы с replace: true

`replace:true` не рекомендуется