Як використовувати `заміна` визначення директиви?


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

Відповіді:


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: 'елемент'. Здається, робить те саме, що і replace: 'true' при використанні ng-transclude.
CMCDragonkai

Чи є replace: false, те саме, що взагалі не використовувати replace?
Ніл,

1
@ Ніл Так. Залишати це все одно, щоfalse
каси

10
replaceзараз застарілий
Роберт,

2
@Robert робить заміну заміною або вона піде назавжди?
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. 

0

Також я отримав цю помилку, якщо мав коментар у верхньому рівні шаблону tn із фактичним кореневим елементом.

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.