ng-disabled überschreibt das Verhalten der benutzerdefinierten Richtlinie

Question

Ich entwickle den AngularJS-Client. Ich habe eine benutzerdefinierte Direktive, die als Attribut verwendet wird. Die Direktive überprüft die Zugriffsebene des Elements und legt fest, dass es deaktiviert wird, wenn der aktuelle Benutzer es nicht verwenden darf.

Das Problem beginnt, wenn das gleiche Element ng-disabled Attribut hat. In diesem Fall setzt die ng-disabled die Fähigkeit des Elements, egal was ich in meiner benutzerdefinierten Anweisung einstelle.

Zum Beispiel Ich habe eine Schaltfläche, die deaktiviert werden sollte, wenn das Formular ungültig ist. Gleichzeitig möchte ich meine benutzerdefinierte Direktive verwenden, um die Schaltfläche zu deaktivieren, wenn der Benutzer nicht berechtigt ist, sie zu verwenden.

<button ng-disabled="myFrm.myCtrl.$invalid" my-custom-directive="controlName"/> 

Innen myCustomDirective ich überprüfen, ob die genannte Kontrolle erlaubt wird, durch den Benutzer aktiviert werden. Wenn nicht - setze ich das deaktivierte Attribut auf das Element. Aber im Fall myFrm.myCtrl.$invalid ist falsch ng-disabled entfernt das deaktivierte Attribut und die Schaltfläche ist aktiviert.

Gibt es eine Lösung für dieses Problem? Wie kann ich verhindern, dass ng-disabled den Vorgang ausführt?

Answer 1

Endlich habe ich eine Lösung für mein Problem gefunden. Anstatt ng-disable-Variable zu beobachten, habe ich das ng-disabled vollständig von seiner Variablen getrennt. Um dies zu tun, habe ich festgelegt, dass die ng-Behinderte in meiner eigenen Anweisung immer wahr sind.Meine Richtlinie ist ein Attribut, so, nachdem ich ein paar verschiedene Möglichkeiten versucht haben, es zu tun, war die Lösung in meinem Richtlinie Konstruktor den folgenden Code hinzuzufügen:

this.isDisabled = "true"; 
this.attrs["ngDisabl​ed"] = this.isDisabled; 

Es ist sehr, sehr wichtig, die this.isDisabled einstellen zu "true" als String und nicht boolean. Sonst funktioniert es nicht.

Answer 2

Gibt die Beispielanweisung an, wie Sie Ihre aktuelle Anweisung auf das Schaltflächenelement angewendet haben? Ich habe festgestellt, dass Ihre Beispielanweisung nicht der korrekten Namenskonvention folgt, bei der jeder Großbuchstabe im Direktivennamen ein Kleinbuchstabe mit einem führenden Bindestrich ist. das heißt myCustomDirective sollte wie so auf die Schaltfläche angewendet werden:

<button ng-disabled="myFrm.myCtrl.$invalid" my-custom-directive="controlName"/> 

Andernfalls Ihre Richtlinie wird nicht für diese Taste eingehalten oder verknüpft werden.

Die einzige andere Sache, an die ich denken konnte, ohne den tatsächlichen Code zu sehen, ist die Priorität der Direktive. Nach den Winkel docs für the ngDisabled directive:

Diese Richtlinie auf Prioritätsstufe 100.

standardmäßig benutzerdefinierte Richtlinien haben eine Priorität von 0. Solange Sie Ihre Richtlinie dieser Richtlinie Parameter geändert haben nicht ausführt sollte nach ng-disabled kompiliert werden und nach ng-disabled verlinkt werden und damit endgültig entscheiden, ob die Schaltfläche deaktiviert oder aktiviert ist.

- BEARBEITEN - Sie sollten myFrm.myCtrl. $ Invalid wie von einem anderen vorgeschlagen hinzufügen und die Direktivenregeln erneut anwenden, wenn sich der Wert ändert. Sie müssen jedoch nicht den gesamten Controller in Ihre Direktive einfügen, Sie können einfach die bidirektionale Bindung für myFrm.myCtrl verwenden. $ Invalid. Ich bin nicht sicher, wie $ watch Priorität noch funktioniert. Ich hoffe, dass, weil Ihre Direktive zuerst kompiliert wird, sie ihre Überwachung auf myFrm.myCtrl anwenden wird. $ Invalid, nachdem ngDisabled funktioniert, und hoffentlich bedeutet das, dass es Wertänderungen von myFrm.myCtrl behandelt. $ Invalid nach ngDisable tut so, dass Ihre Anweisung es hat das letzte Wort darüber, welche Regel angewendet wird.