Jak używać funkcji „replace” definicji dyrektywy?

81

W tym dokumencie: http://docs.angularjs.org/guide/directive jest napisane, że istnieje replacekonfiguracja dla dyrektyw:

szablon - zamień aktualny element na zawartość HTML. Proces wymiany migruje wszystkie atrybuty / klasy ze starego elementu do nowego. Aby uzyskać więcej informacji, zobacz sekcję Tworzenie komponentów poniżej.

kod 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
  }
});

Kod HTML

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

Ale ostatnia strona wygląda tak:

directive template1
directive template2

Wygląda na replaceto, że nie działa. Czy coś mi brakuje?

Demo na żywo: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

angularjs angularjs-directive

— Freewind
źródło

175

Mylisz się z tym transclude: true, co dodałoby zawartość wewnętrzną.

replace: trueoznacza, że treść szablonu dyrektywy zastąpi element, na którym dyrektywa jest zadeklarowana, w tym przypadku <div myd1>tag.

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

Na przykład bez replace:true

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

i z replace:true

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

Jak widać w drugim przykładzie, znacznik DIV jest rzeczywiście zastępowany .

— czeki
źródło

A co z transkludowaniem: „element”. Wydaje się, że robi to samo, co replace: „true” podczas używania ng-transclude.

— CMCDragonkai

Czy replace: false, to to samo, co nieużywanie w ogóle zamiany?

— Neil

1

@Neil Yes. Pozostawienie tego jest takie samo, jakfalse

— czeków

10

replacejest teraz przestarzały

— Robert

2

@Robert czy „replace” miałby zamiennik, czy też zniknął na dobre?

— cirovladimir

12

Jak stwierdzono w dokumentacji, „zastąp” określa, czy obecny element zostanie zastąpiony dyrektywą. Inną opcją jest to, czy w zasadzie jest dodawany jako dziecko. Jeśli spojrzysz na źródło swojego pliku plnkr, zauważysz, że w przypadku drugiej dyrektywy, gdzie replace jest fałszem, znacznik DIV wciąż tam jest. W przypadku pierwszej dyrektywy tak nie jest.

Pierwszy wynik:

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

Drugi wynik:

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

— Ryan O'Neill
źródło

5

Zastąp [True | Fałsz (domyślnie)]

Efekt

1.  Replace the directive element.

Zależność:

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

— user3454062
źródło

0

Otrzymałem również ten błąd, gdybym miał komentarz na najwyższym poziomie szablonu wśród rzeczywistego elementu głównego.

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

— Konstantin Isaev
źródło