Как использовать `replace` в определении директивы?

81

В этом документе: http://docs.angularjs.org/guide/directive говорится, что есть replaceконфигурация для директив:

шаблон - заменить текущий элемент содержимым HTML. В процессе замены все атрибуты / классы переносятся из старого элемента в новый. См. Раздел «Создание компонентов» ниже для получения дополнительной информации.

код javascript

app.directive('myd1', function(){
  return {
    template: '<span>directive template1</span>',
    replace: true
  }
});

app.directive('myd2', function(){
  return {
    template: '<span>directive template2</span>',
    replace: false
  }
});

HTML-код

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

Но последняя страница выглядит так:

directive template1
directive template2

Кажется replace, не работает. Я что-нибудь упускаю?

Живая демонстрация: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

Freewind
источник

Ответы:

175

Вы запутались с тем transclude: true, что добавит внутреннее содержимое.

replace: trueозначает, что содержимое шаблона директивы заменит элемент, для которого объявлена ​​директива, в данном случае <div myd1>тег.

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

Например без replace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

и с replace:true

<span class="replaced" myd1="">directive template1</span>

Как вы можете видеть в последнем примере, тег div действительно заменен .

чеканки
источник
А как насчет transclude: 'element'. Похоже, что при использовании ng-transclude он делает то же самое, что и replace: 'true'.
CMCDragonkai
Замена: false - это то же самое, что вообще не использовать замену?
Нил
1
@ Нил Да. Оставить это так же, какfalse
checketts
10
replaceустарела
Роберт
2
@Robert действительно ли 'replace' получит замену или она ушла навсегда?
cirovladimir
12

Как указано в документации, «replace» определяет, заменяется ли текущий элемент директивой. Другой вариант - добавить ли он просто как дочерний элемент. Если вы посмотрите на источник своего plnkr, обратите внимание, что для второй директивы, где replace имеет значение false, тег div все еще существует. Для первой директивы это не так.

Первый результат:

<span myd1="">directive template1</span>

Второй результат:

<div myd2=""><span>directive template2</span></div>
Райан О'Нил
источник
5

Заменить [True | False (по умолчанию)]

Эффект

1.  Replace the directive element. 

Зависимость:

1. When replace: true, the template or templateUrl must be required. 
user3454062
источник
0

Также я получил эту ошибку, если у меня был комментарий на верхнем уровне шаблона среди фактического корневого элемента.

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>
Константин Исаев
источник