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

в этом документе: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

4 76
angularjs angularjs-directive

4 ответа:

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

164

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

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

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

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

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

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

эффект

1.  Replace the directive element.

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

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

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

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