AngularJS директива вахты действительность

Question

Я пытаюсь создать директиву, которая должна отображать некоторые действия, когда поле ввода помечено как недействительное. Для этого примера предположим, у меня есть директива, которая проверяет, является ли входной простое число, и я хочу, чтобы создать директиву, которая добавляет класс к элементу, когда оно недействительно и

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

При проверке премьер ИСПОЛЬЗУЕТ парсеров и форматировщиков на ng-модели для обновления действительности модели.

Теперь я хочу, чтобы директива invalid-add-class добавляла класс «ошибка», когда модель недействительна, и удалять ее, когда она действительна. Другими словами, он должен смотреть свойство $ valid (или $ invalid) контроллера модели. Однако я не могу понять, как это сделать. Я пробовал:

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

Возможно, я мог наблюдать за какой-то переменной по охвату, но я не знаю, какую переменную нужно смотреть.

Итак, как я могу получать уведомления о том, когда меняются действительность модели?

Answer 1

Если у вас есть <form>, добавьте name к нему (предположим «Myform») и name на свой вход (предположим myInput). Вы должны быть в состоянии $watch этого путь:

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

Если вы не имеете form, вы всегда можете посмотреть функцию. Таким образом:

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

Вы можете прочитать больше о форме подхода here.

Answer 2

Наша цель, в общем, состоит в том, чтобы сделать директивную работу независимо от какой-либо одной формы или ввода. Как мы можем позволить ему прочитать локальное свойство $valid без обязательной привязки его к одной конкретной форме & имя ввода?

Просто используйте require: 'ngModel' как одно из свойств вашей директивы. Это добавит локальный контроллер ngModel в качестве четвертого аргумента функции связи, и вы можете разместить $watch непосредственно на $valid, не связывая реализацию директивы с какой-либо конкретной формой или вводом.

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

Обработчик должен последовательно запускать изменения в $, действительные с этой структурой. См. this Fiddle, где вход подтвержден для шаблона почтового индекса U.S. или Zip + 4. Вы будете получать предупреждение каждый раз, когда будут изменены действительность.

РЕДАКТИРОВАТЬ 3/21/14: Это сообщение ранее было зависшим от моего заблуждения, фиксируя неправильную причину проблемы с реализацией. Моя вина. В приведенном выше примере удаляется эта фиксация. Кроме того, добавлена ​​скрипка, показывающая, что этот подход действительно работает и всегда делался, когда вы добавляете кавычки вокруг выражения watch.

Answer 3

Если вы не имеете <form /> вы можете легко получить один:

В вашем определении директивы:

require: '^form' 

, а затем в функции связи, форма передается в качестве четвертого параметра:

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

Теперь вам не придется жестко прописать форму или поле ввода для выполнения $ часов:

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