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

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

Ответы

Ответ 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

Смотрите этот, чтобы узнать больше о закрытии.

Ответ 2

replace:true устарела

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

replace ([DEPRECATED!], will be removed in next major release - т.е. v2.0)

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

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

- API всеобъемлющей директивы AngularJS

Из GitHub:

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

- AngularJS Issue # 7636

Обновление

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

Проблемы с заменой: правда

Для получения дополнительной информации см. Справочник по API-сервису AngularJS $ compile - Проблемы с replace:true.