Wie wird "Ersetzen" der Direktivendefinition verwendet?

81

In diesem Dokument: http://docs.angularjs.org/guide/directive heißt es, dass es eine replaceKonfiguration für Anweisungen gibt:

Vorlage - Ersetzen Sie das aktuelle Element durch den Inhalt des HTML. Der Ersetzungsprozess migriert alle Attribute / Klassen vom alten zum neuen Element. Weitere Informationen finden Sie im Abschnitt Erstellen von Komponenten.

Javascript-Code

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 Quelltext

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

Aber die letzte Seite sieht so aus:

directive template1
directive template2

Es scheint, dass das replacenicht funktioniert. Vermisse ich etwas

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

angularjs angularjs-directive Freilauf
quelle

Antworten:

174

Sie werden verwirrt mit transclude: true, was den inneren Inhalt anhängen würde.

replace: truebedeutet, dass der Inhalt der Direktivenvorlage das Element ersetzt, für das die Direktive deklariert ist, in diesem Fall das <div myd1>Tag.

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

Zum Beispiel ohne replace:true

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

und mit replace:true

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

Wie Sie im letzteren Beispiel sehen können, wird das div-Tag tatsächlich ersetzt .

Scheck
quelle
Was ist mit transclude: 'element'. Es scheint dasselbe zu tun wie ersetzen: 'true' bei Verwendung von ng-transclude.
CMCDragonkai
Ist replace: false, das gleiche, als würde man replace überhaupt nicht verwenden?
Neil
1
@Neil Ja. Das false
Auslassen
10
replaceist jetzt veraltet
Robert
2
@Robert hat 'ersetzen' einen Ersatz oder ist es endgültig weg?
Cirovladimir
12

Wie in der Dokumentation angegeben, bestimmt 'Ersetzen', ob das aktuelle Element durch die Direktive ersetzt wird. Die andere Option ist, ob es im Grunde nur als Kind hinzugefügt wird. Wenn Sie sich die Quelle Ihres plnkr ansehen, beachten Sie, dass für die zweite Direktive, in der replace falsch ist, das div-Tag noch vorhanden ist. Für die erste Richtlinie ist es nicht.

Erstes Ergebnis:

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

Zweites Ergebnis:

<div myd2=""><span>directive template2</span></div>
Ryan O'Neill
quelle
5

Ersetzen Sie [True | False (Standard)]

Bewirken

1.  Replace the directive element.

Abhängigkeit:

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

Außerdem habe ich diesen Fehler erhalten, wenn ich den Kommentar in der obersten Ebene der Vorlage unter dem tatsächlichen Stammelement hatte.

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