it-swarm.com.de

Wie verwende ich die Direktive Definition ersetzen?

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

template - ersetzt das aktuelle Element durch den Inhalt des HTML-Codes. Der Ersetzungsprozess migriert alle Attribute/Klassen vom alten Element zum neuen. 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>

Die letzte Seite sieht jedoch so aus:

directive template1
directive template2

Es scheint, dass replace nicht funktioniert. Vermisse ich etwas?

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

79
Freewind

Sie werden mit transclude: true verwechselt, wodurch der innere Inhalt angehängt wird.

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

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

Zum Beispiel ohnereplace:true

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

und mitreplace:true

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

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

166
checketts

Wie in der Dokumentation angegeben, bestimmt 'replace', 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 das div-Tag für die zweite Direktive, in der replace falsch ist, noch vorhanden ist. Für die erste Richtlinie gilt das nicht.

Erstes Ergebnis:

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

Zweites Ergebnis:

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

Ersetzen Sie [True | Falsch (Standard)]

Bewirken

1.  Replace the directive element. 

Abhängigkeit:

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

Ich bekam auch diesen Fehler, wenn ich den Kommentar in der obersten Ebene der Vorlage unter dem eigentlichen Wurzelelement hatte.

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