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

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

template - заменить текущий элемент содержимым 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 не работает. Мне что-то не хватает?

Live demo: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

Ответы

Ответ 1

Вы путаетесь с 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 действительно заменен.

Ответ 2

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

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

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

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

<div myd2=""><span>directive template2</span></div>

Ответ 3

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

Эффект

1.  Replace the directive element.

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

1. When replace: true, the template or templateUrl must be required.

Ответ 4

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

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>