Frage Wie verwende ich `replace` von Direktiven?


In diesem Dokument: http://docs.angularjs.org/guide/directive Es sagt, dass es ein replace Konfiguration für Direktiven:

Vorlage - Ersetzen Sie das aktuelle Element durch den Inhalt des HTML. Der Ersetzungsprozess migriert alle Attribute / Klassen von dem alten Element zu dem neuen Element. Weitere Informationen finden Sie im Abschnitt zum 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 die replace funktioniert nicht. Vermisse ich etwas?

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


75
2018-03-08 02:23


Ursprung


Antworten:


Du wirst verwirrt mit transclude: true, die den inneren Inhalt anhängen würde.

replace: true bedeutet, dass der Inhalt der Vorlage der Richtlinie das Element ersetzt, für das die Richtlinie gilt, in diesem Fall die <div myd1> Etikett.

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

Beispielsweise 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 letzten Beispiel sehen können, ist das div-Tag in der Tat ersetzt.


162
2018-03-08 03:49



Wie die Dokumentation sagt, 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 replace falsch ist, dass das Div-Tag immer noch da 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>

8
2018-03-08 03:51



Ersetzen Sie [Wahr | Falsch (Standard)]

Bewirken

1.  Replace the directive element. 

Abhängigkeit:

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

5
2018-06-06 06:42



Auch ich habe diesen Fehler, wenn ich den Kommentar in der obersten Ebene der Vorlage unter mit dem eigentlichen Wurzelelement hatte.

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

0
2018-05-25 16:13