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

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

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

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

пример

JS / Угловой:

  angular.module('scopes', []) .controller('Ctrl', function($scope) { $scope.title = "hello"; }) .directive('myDir', function() { return { restrict: 'E', replace: true, template: '
{{title}}
' }; });

HTML:

 

some existing content

Смотрите это в Плункере здесь:

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

Когда вы replace: true вы получите следующий fragment DOM:

 
hello

тогда как с replace: false вы получаете это:

 
hello

Таким образом, свойство replace в директивах ссылается на то, должен ли элемент, к которому применяется директива ( в этом случае) ( replace: false ), и шаблон директивы должен быть добавлен как его дочерний элемент,

ИЛИ

элемент, к которому применяется директива, должен быть заменен ( replace: true ) шаблоном директивы.

В обоих случаях элемент (к которому применяется директива) дети будут потеряны. Если вы хотите перенести исходный контент / дети элемента, вам придется его перевести. Следующая директива будет делать это:

 .directive('myDir', function() { return { restrict: 'E', replace: false, transclude: true, template: '
{{title}}
' }; });

В этом случае, если в шаблоне директивы у вас есть элемент (или элементы) с атрибутом ng-transclude , его содержимое будет заменено исходным содержимым элемента (к которому применяется директива).

См. Пример перехода http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

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

replace:true устарел

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

replace ([DEPRECATED!], будет удалена в следующем основном выпуске – то есть v2.0)

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

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

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

От GitHub:

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

– Проблема AngularJS № 7636

  • Каков наилучший способ условного применения атрибутов в AngularJS?
  • Как понять «терминал» директивы?
  • В чем разница между ng-app и data-ng-app?
  • Установите фокус на первый недопустимый ввод в форме AngularJs
  • Как вы можете ограничить значение из ввода с помощью AngularJS?
  • Многоуровневые таблицы (внутри другого при нажатии)
  • Чтобы проверить настраиваемую директиву angularjs validation
  • Угловая: вызов функции controllerа внутри функции директивной ссылки с использованием &
  • Угловой ng-стиль с условным выражением
  • Как установить динамический controller для директив?
  • Угловая динамическая проверка ng-шаблонов
  • Давайте будем гением компьютера.