Я пытаюсь создать директиву, которая должна отображать некоторые действия, когда поле ввода помечено как недействительное. В этом примере допустим, что у меня есть директива, которая проверяет, является ли ввод простым числом, и я хочу создать директиву, которая добавляет класс к элементу, когда он недействителен:
<input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error">
Validate-prime использует синтаксические анализаторы и форматирование на ng-модели для обновления действительности модели.
Теперь я хочу, чтобы директива invalid-add-class добавляла класс "ошибка", когда модель недействительна, и удалять ее, когда она действительна. Другими словами, он должен смотреть свойство $valid (или $invalid) контроллера модели. Однако я не могу понять, как это сделать. Я пробовал:
link : function(scope, element, attrs, ctrl) {
ctrl.$watch("$valid", function(newVal, oldVal) {
//never fired
});
}
Возможно, я мог бы посмотреть некоторую переменную в области видимости, но я не знаю, какую переменную нужно наблюдать.
Итак, как я могу быть уведомлен о том, когда изменяется модель действия?
Если у вас есть <form>, добавьте к нему name (допустим 'myForm') и name на ваш вход (допустим myInput). Вы должны иметь возможность $watch:
scope.$watch('myForm.myInput.$valid', function(validity) {})
Если у вас нет form, вы всегда можете наблюдать за функцией. Таким образом:
scope.$watch(function() { return ctrl.$valid; }, function(validity){});
Подробнее о подходе формы здесь.
Если у вас нет <form />, вы можете легко получить его:
В определении вашей директивы:
require: '^form'
а затем в вашей функции связи форма передается как четвертый параметр:
link: function (scope, element, attr, ctrl) {
Теперь вам не нужно жестко закодировать форму или поле ввода для выполнения $watch:
scope.$watch(ctrl.$name + '.' + element.attr('name') + '.$valid',
function (validity) {});
Наша цель, в общем, должна заключаться в том, чтобы сделать директивную работу независимо от какой-либо одной формы или ввода. Как мы можем разрешить ему читать локальное свойство $valid без обязательной привязки его к одной конкретной форме и имени ввода?
Просто используйте require: 'ngModel' как одно из свойств вашей директивы config. Это добавит локальный контроллер ngModel в качестве четвертого аргумента функции связи, и вы можете поместить $watch непосредственно на $valid, не связывая реализацию директивы с какой-либо конкретной формой или вводом.
require: 'ngModel',
link: function postLink(scope, element, attrs, controller) {
scope.inputCtrl = controller;
scope.$watch('inputCtrl.$valid', handlerFunc)
}
Обработчик должен постоянно запускать изменения в $valid с этой структурой. См. этот скрипт, где вход подтвержден для шаблона почтового индекса U.S. или Zip + 4. Вы будете получать предупреждение каждый раз, когда будут изменены действительность.
РЕДАКТИРОВАТЬ 3/21/14: Этот пост ранее был зависшим от моего заблуждения, фиксируя неправильную причину проблемы реализации. Моя вина. В приведенном выше примере удаляется эта фиксация. Кроме того, добавлена скрипка, показывающая, что этот подход действительно работает и всегда выполнялся, как только вы добавляете кавычки вокруг выражения watch.