Comment surveiller un sélecteur JQuery en utilisant la méthode scope.$watch() d'AngularJS

Question

J'écris une directive qui doit surveiller les éléments qui sont mis à jour avec une classe particulière, par exemple .ng-invalid . Comme vous le savez, .ng-invalid est ajouté aux éléments de formulaire qui ne sont pas valides.

Je dois surveiller ces éléments pour déterminer si la classe a été ajoutée ou supprimée.

Comment puis-je y parvenir ?

Merci d'avance

Answer 1

Vous pourriez $tendre une fonction qui obtient la longueur de $(".ng-invalid") :

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

Violon . Dans le violon, j'ai ajouté ng-minlength="2" au premier input . Tapez deux caractères dans ce champ pour voir le déclencheur $watch.

Answer 2

Est-ce qu'il serait suffisant pour vous de regarder le $invalid l'attribut de FormController ? Vous serez ainsi averti des modifications apportées au statut d'invalidité holistique du formulaire, par exemple :

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