Ważność zegarka zgodnego z AngularJS

Question

Próbuję utworzyć dyrektywę, która powinna wykonywać niektóre akcje, gdy pole wejściowe jest oznaczone jako nieprawidłowe. W tym przykładzie pozwala zakładać Mam dyrektywę, która sprawdza, czy wejście jest liczbą pierwszą, a ja chcę stworzyć dyrektywę, która dodaje klasę do elementu kiedy jest nieprawidłowy:

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

validate-prime używa analizatory składni i formatery na modelu ng, aby zaktualizować poprawność modelu.

Teraz chcę, aby dyrektywa o nieprawidłowej klasie dodawała klasę "błąd", gdy model jest nieprawidłowy, i aby usunąć ją, gdy jest ona ważna. Innymi słowy, powinien obejrzeć właściwość $ valid (lub $ invalid) kontrolera modelu. Jednak nie mogę wymyślić, jak to działa. Próbowałem:

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

Być może mogłem obejrzeć niektóre zmienne w zakresie, ale nie wiem, którą zmienną oglądać.

Jak mogę otrzymać powiadomienie o zmianie ważności modelu?

Answer 1

Jeśli masz <form>, dodać do niego name (pozwala zakładać „MyForm”) i name do swojego wejścia (pozwala zakładać myInput). Powinieneś być w stanie $watch tym przez:

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

Jeśli nie masz form, zawsze można oglądać funkcję. W ten sposób:

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

można przeczytać więcej na temat podejścia formy here.

Answer 2

Naszym ogólnym celem powinno być sprawienie, aby dyrektywa działała niezależnie od jednej formy lub wkładu. W jaki sposób możemy zezwolić jej na odczytanie lokalnej właściwości $valid bez bezwzględnego wiązania jej z konkretną nazwą wejściową?

Wystarczy użyć require: 'ngModel' jako jednej z właściwości konfiguracji dyrektywy. Spowoduje to wstawienie lokalnego kontrolera ngModel jako czwartego argumentu funkcji łącza, a użytkownik może umieścić kod $watch bezpośrednio pod numerem $valid bez konieczności powiązania implementacji dyrektywy z konkretną formą lub wejściem.

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

Przewodnik powinien konsekwentnie wywoływać zmiany w $ valid z tą strukturą. Zobacz this Fiddle, gdzie dane wejściowe są sprawdzane pod kątem wzoru kodu pocztowego w USA lub Zip + 4. Otrzymasz alert za każdym razem, gdy zmieni się jego ważność.

EDYCJA 3/21/14: Ten post został wcześniej zawieszony na moim złudzeniu, naprawiając niewłaściwą przyczynę problemu z implementacją. Moja wina. Powyższy przykład usuwa tę fiksację. Dodałem też skrzypce, pokazując, że to podejście faktycznie działa i zawsze było, po dodaniu cytatów wokół wyrażenia zegarka.

Answer 3

Jeśli nie masz <form /> można łatwo dostać jeden:

w definicji dyrektywy:

require: '^form' 

a następnie w swojej funkcji łącza, formularz jest przekazywany jako czwarty parametr:

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

teraz nie muszą ciężko kodem formularz lub pole wprowadzania do wykonywania dolarów zegarek:

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