Wie man einen JQuery Selector mit AngularJS scope beobachtet $ watch() Methode

Question

Ich schreibe eine Direktive, die nach Elementen suchen muss, die mit einer bestimmten Klasse aktualisiert werden, sagen wir .ng-invalid. Wie Sie wissen, wird .ng-invalid zu Formularelementen hinzugefügt, die ungültig sind.

Ich muss diese Elemente beobachten, um festzustellen, ob die Klasse hinzugefügt oder entfernt wurde.

Wie kann ich das erreichen?

Vielen Dank im Voraus

Answer 1

Sie könnten $ eine Funktion sehen, die die Länge $(".ng-invalid") bekommt:

scope.$watch(function() { 
    return $(".ng-invalid").length; 
}, function (newVal, oldVal) { 
    if(newVal !== oldVal) { 
     console.log('changed!', newVal, oldVal); 
     // do your changes here 
    } 
}) 

Fiddle. In der Geige fügte ich ng-minlength="2" zu der ersten input hinzu. Geben Sie zwei Zeichen in dieses Feld ein, um den $ watch-Trigger zu sehen.

Answer 2

Wäre es ausreichend sein, für Ihre Zwecke das $invalid Attribut FormController zu sehen? Dadurch werden Sie von Änderungen an der ganzheitlichen ungültigen Status des Formulars mitteilen, zum Beispiel:

// Somewhere in your directive; formCtrl is the FormController 
scope.$watch(function() { 
    return formCtrl.$invalid; 
}, function(isInvalid, wasInvalid) { 
    // ... 
});