Mehrere Direktiven [x, y], die nach einem isolierten Bereich fragen - angularjs, angularjs-directive, angularjs-scope

Ich habe 2 Anweisungen zu einem Element. Jeder arbeitet unabhängig voneinander. Mir ist die Einschränkung von 1 Bereich pro Element bekannt. Ich verstehe nicht, warum dies verstößt.

Direktive X (Priorität 100) nimmt ein Objekt und verwendet es, um dem Element weitere Direktiven hinzuzufügen, und entfernt sich selbst.

<div x="obj1"></x>

verwandelt sich in:

<div ng-model="x.value" ... ></div>

Die Definition für die Direktive X lautet:

scope: { x: "=" },
replace: false,
link: ...

Die Direktive Y (Priorität 99) macht ein Element in ein Widget und verwendet ein NG-Modell.

<div y ng-model="scopeStringValue"></div>

verwandelt sich in:

<div y ng-model="scopeStringValue">
<input ng-model="scopeStrinValue" />
...
</div>

Die Definition für die Direktive Y lautet

scope: true,
replace: true,
link: ...

Was ich möchte, ist, sie zusammen zu verwenden, so dass die Direktive x das ng-Modell für die Direktive y bereitstellt, aber ich erhalte den Namensfehler.

<div y x="obj"></div>

sollte sich zuerst in

<div y ng-model="x.value"></div>

und dann in:

<div y ng-model="x.value">
<input ng-model="x.value" />
...
</div>

Ich verstehe nicht, warum diese Richtlinien nicht zusammenarbeiten können.

Antworten:

0 für die Antwort № 1

Die Antwort war zu erklären scope: false in der Direktive X und weisen Sie die neuen Attribute gemäß dem übergeordneten Bereich zu (der anstelle eines neuen Bereichs verwendet wird).

Zusätzlich musste ich das Terminal auf true einstellenDirektive X sonst würde Direktive Y zweimal ausgewertet werden. Einmal während der manuellen Kompilierung in Direktive X, dann einmal alleine nach. Nicht sicher, warum das so ist terminal: true verhindert es.

replace: false,
scope: false,
terminal: true,

Damit:

<div y x="obj"></div>

zuerst verwandelt sich in:

<div y ng-model="obj.value"></div>

und schließlich in:

<div y ng-model="obj.value">
<input ng-model="obj.value" />
...
</div>

Ursprünglich sah die X-Link-Funktion der Direktive aus

attributes.$set("ng-model", "x.value");
element.removeAttr("x");
$compile(el)(scope);

und jetzt sieht es aus

attributes.$set("ng-model", attrs.fieldSettings + ".value");
element.removeAttr("x");
$compile(el)(scope);

Das Entfernen des x-Attributs ist dafür nicht relevantProblem, aber falls sich jemand wundert, warum es da ist: Dies liegt daran, dass wir manuell $ kompilieren und dies würde eine unendliche Schleife der Auswertung der X-Direktive verursachen.

---