Можно ли запрограммировать обработчик событий в директиве?

100
15

Я пытался выяснить способ запуска процедур проверки на входном элементе при нажатии кнопки в той же форме. Я рассматривал несколько разных способов сделать это. Кажется, что наименее запутанным является создание директивы, которая модифицирует кнопку ввода, чтобы запустить метод $ validate в элементе целевой формы. Я установил это без особых проблем, но я заблокирован о том, как изменить обработчик события ngClick, чтобы он запускал $ validate, оставляя неповрежденный исходный HTML-код ngClick.

Я пытался использовать функцию шаблона директивы для извлечения исходного метода ngClick и связать его с новой функцией ngClick, определенной в директиве. Это начало быстро превращаться в беспорядок, и я обеспокоен тем, насколько он хрупким.

Есть ли способ перехватить обработчик ngClick в директиве и сохранить первоначальную функциональность?

В качестве альтернативы, я открыт для предложений о том, как запускать процедуры проверки в поле ввода при нажатии кнопки при минимальном участии слоя контроллера.

спросил(а) 2015-02-11T05:57:00+03:00 5 лет назад
1
Решение
49

Это классический пример XY-вопроса (если не двойной XY-вопрос).

Вам не нужно "связывать обработчики событий" (что бы вы ни подразумевали под этим). Мне также не нужно, по-моему, инициировать проверку вручную только потому, что вы проверяете внешние данные.

Проверка в Угловом просто выполняется - и он не предназначен для запуска, кроме как путем изменения данных.

Чтобы добавить свой собственный валидатор, вам нужно создать директиву (что похоже на то, что вы сделали). В этой директиве вам, вероятно, нужно указать, к чему вы проверяете, например массив строк, против которых вы хотите проверить наличие дубликатов.

Скажем, для простоты, что вы хотите проверить на другое значение в ViewModel. Предположим, что это будет использоваться:

<input ng-model="bar">
<form name="form1">
<input ng-model="foo" not-equal-to="bar">
</form>
<span ng-show="form1.$error.notEqualTo">error: foo is equal to bar</span>

Итак, вам нужно создать директиву notEqualTo которая добавит валидатор в ngModel.$validators. Эта директива также требует $watch для изменений в bar и повторной установки действительности:

app.directive("notEqualTo", function(){
return {
require: "ngModel",
scope: {
notEqualTo: "="
},
link: function(scope, element, attrs, ngModel){

// register "notEqualTo" validator
ngModel.$validators.notEqualTo = function(modelValue){
return validate(modelValue, scope.notEqualTo);
};

// rerun validation on changes to scope.notEqualTo
scope.$watch("notEqualTo", function(){
ngModel.$setValidity("notEqualTo",
validate(ngModel.$modelValue, scope.notEqualTo));
});

function validate(one, other){
return one !== other;
}
}
};
});

plunker

ответил(а) 2015-02-11T22:22:00+03:00 5 лет назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема