validità vigilanza direttiva AngularJS

Question

Provo a creare una direttiva che dovrebbe eseguire alcune azioni quando un campo di input è contrassegnato come non valido. Per questo esempio permette di assumere ho una direttiva che controlla se l'ingresso è un numero primo, e io voglio creare una direttiva che aggiunge una classe all'elemento quando è valida:

<input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error"> 

Il validate-prime utilizza la parser e formattatori su ng-model per aggiornare la validità del modello.

Ora desidero che la direttiva invalid-add-class aggiunga la classe "error" quando il modello non è valido e rimuoverlo quando è valido. In altre parole, dovrebbe guardare la proprietà $ valida (o $ non valida) del controller del modello. Tuttavia, non riesco a capire come farlo funzionare. Ho provato:

link : function(scope, element, attrs, ctrl) { 
    ctrl.$watch("$valid", function(newVal, oldVal) { 
    //never fired 
    }); 
} 

Forse potrei guardare un po 'variabile sul campo di applicazione, ma non so quale variabile da controllare.

Quindi, come posso ricevere una notifica quando cambia la validità di un modello?

Answer 1

Se si dispone di un <form>, aggiungere un name ad esso (lascia supporre 'myForm') e una name al vostro ingresso (lascia supporre myInput). Si dovrebbe essere in grado di $watch questo:

scope.$watch('myForm.myInput.$valid', function(validity) {}) 

Se non si dispone di un form, si può sempre guardare una funzione. In questo modo:

scope.$watch(function() { return ctrl.$valid; }, function(validity){}); 

Si può leggere di più l'approccio modulo here.

Answer 2

Il nostro obiettivo, in generale, dovrebbe essere quello di far funzionare una direttiva indipendentemente da qualsiasi forma o input. Come possiamo consentirci di leggere la proprietà locale $valid senza vincolarla obbligatoriamente a un singolo modulo specifico nome dell'input &?

Basta usare require: 'ngModel' come una delle proprietà della configurazione della direttiva. Ciò inietterà il controller ngModel locale come quarto argomento della funzione di collegamento, e puoi posizionare uno $watch direttamente su $valid senza dover accoppiare l'implementazione della direttiva a nessun particolare modulo o input.

require: 'ngModel', 
link: function postLink(scope, element, attrs, controller) { 
    scope.inputCtrl = controller; 
    scope.$watch('inputCtrl.$valid', handlerFunc) 
} 

Il gestore deve costantemente attivare le modifiche a $ valido con quella struttura. Vedere this Fiddle, in cui l'input è convalidato per il modello di un codice postale degli Stati Uniti o Zip + 4. Riceverai un avviso ogni volta che cambia la validità.

EDIT 21/3/14: questo post in precedenza mi ha bloccato su un mio delirio, fissando la causa sbagliata di un problema di implementazione. Colpa mia. L'esempio sopra rimuove quella fissazione. Inoltre, ha aggiunto il violino, dimostrando che questo approccio in effetti funziona, e lo ha sempre fatto, dopo aver aggiunto le virgolette attorno all'espressione dell'orologio.

Answer 3

Se non si dispone di un <form /> si può facilmente ottenere uno:

nella definizione direttiva:

require: '^form' 

e poi nella vostra funzione di collegamento, il modulo viene passato come il quarto parametro:

link: function (scope, element, attr, ctrl) { 

Ora non c'è bisogno di hard-code il modulo o il campo di input per eseguire l'orologio $:

scope.$watch(ctrl.$name + '.' + element.attr('name') + '.$valid', 
function (validity) {});