Почему не работает watch в директиве при вводе значения?

Question

[Васса]

Собственно, есть директива ng-email-valid, которая валидирует email и в зависимости от результата показывает ошибку, но в данном случае watch вообще не срабатывает при вводе. Есть аналогичная директива, у меня только там поле name и все работает, а здесь и ошибки не вижу и watch не отрабатывает :(

<input class="d-form__input-text" ng-model="email" ng-required="true" ng-focus="focusHandler($event)" ng-blur="blurHandler($event)" name="email" type="email">
<div class="d-form__error" ng-email-valid="orderingForm.email">Пожалуйста введите корректный email</div>

.directive('ngEmailValid', ['$parse', function($parse) {
    return function(scope, element, attr) {
        var EMAIL_REGEXP = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + "",
            model = scope.$eval(attr['ngEmailValid']);

        scope.$watch(model.$name, function() {
            model.$invalid && model.$dirty ? element.show() : element.hide();
        });
    }
}])

Answer 1

[Сергей Протько]

Используйте изолированные скоупы:

directive('ngIsInputValid', function () {
    return {
        scope: {
             input: '=ngIsInputValid'
        },
        link: function (scope, el, attr) {
             scope.$watch('input.$invalid', function (invalid) {
                   if (invalid && scope.input.$dirty) {
                         el.show();
                   }
                   el.hide();
             })
        }
    };
});

p.s. любая валидация должна происходить на инпутах и вестись через ngModelController.

Comments

[Васса]

Спасибо!,

Не совсем понял что Вы имели ввиду
> p.s. любая валидация должна происходить на инпутах и вестись через ngModelController.

Answer 2

[Mikhail Osher]

1) ngRequired надо использовать лишь в том случае, когда передаете expression. В данном случае достаточно обычного аттрибута required.
2) Ваша директива в данном случае не нужна. Достаточно написать примерно такой код:

<!-- предположим, что где-то выше есть <form name="form" ...> -->
<div class="d-form__error" data-ng-if="form.email.$invalid">
    Пожалуйста введите корректный email
</div>