Come guardare un selettore JQuery utilizzando l'ambito AngularJS. $ Watch() Metodo

Question

Sto scrivendo una direttiva che deve controllare elementi che vengono aggiornati con una determinata classe, ad esempio .ng-invalid. Come sai, .ng-invalid viene aggiunto agli elementi del modulo non validi.

Ho bisogno di guardare questi elementi per determinare se la classe è stata aggiunta o rimossa.

Come posso ottenere questo risultato?

Grazie in anticipo

Answer 1

Si potrebbe vedere $ una funzione che ottiene la lunghezza del $(".ng-invalid"):

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

Fiddle. Nel violino, ho aggiunto ng-minlength="2" al primo input. Digita due caratteri in quel campo per vedere il trigger $ watch.

Answer 2

sarebbe sufficiente per i vostri scopi di guardare l'attributo $invalid di FormController? Questo ti avviserà dei cambiamenti stato non valido olistica del form, ad esempio:

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