Угловые: директива доступа к элементу формы

Question

У меня есть форма ярлык, содержащий вход:

<label data-live-email-check="http://www.example-service-uri.com/"> 
    <span class="embedded-label">Email</span> 
    <input ng-model="formData.email" 
      type="email" 
      name="email" 
      placeholder="Email" 
      required/> 
    <span class="message" ng-show="emailValidationMessage">{{emailValidationMessage}}</span> 
</label> 

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

angular.module("App").directive("liveEmailCheck", [function() { 
    return { 
     restrict: "A", 
     scope: { 
      ngModel: "=" 
     }, 
     link: function (scope, element, attrs) { 
      scope.$watch(
       function(){ 
        return scope.ngModel 
       }, 
       function(newVal){ 
        console.log(newVal); 
       } 
      ); 
     } 
    } 
}]); 

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

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

--Edit--

Чтобы обеспечить решение, которое я лично бы взять (из-за незнания «лучшего» пути), были бы следующие:

angular.module("App").directive("liveEmailCheck", [function() { 
    return { 
     restrict: "A", 
     require: ["^form"], 
     link: function (scope, element, attrs, ctrl) { 
      var formCtrl = ctrl[0]; 
      scope.formEl = formCtrl[element.find("input").attr("name")]; 


      scope.$watch(function(){return scope.formEl.$valid}, 
       function(newVal){ 
        console.log(newVal); 
       }); 
     } 
    } 
}]); 

Это работает , но я чувствую, что он «нарушает угловые правила».

Answer 1

Пользовательская проверка записывается так:

'use strict'; 

angular.module('App') 
    .directive('liveEmailCheck', function(){ 

    return { 
     require: 'ngModel', 
     link: function (scope, elem, attr, ngModel){ 
     ngModel.$validators.liveEmailCheck= function (value){ 
     //Your logic here or in a factory 
     }; 
     } 
    }; 
    }); 

, а затем на вашем HTML он идет как

<input type="email" live-email-check="liveEmailCheck> 

В основном вы добавить свои собственные проверки в набор сборки в валидациях от углового ,

Answer 2

Что вам нужно, это ng-model asyncValidator. Вот простая реализация такой директивы.

angular.module("App").directive('asyncEmailValidator', function ($http) { 
    return { 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModel) { 
     var emailValidationUrl = attrs.asyncEmailValidator; 
     ngModel.$asyncValidators.emailValidator = function (modelValue, viewValue) { 
     var value = modelValue || viewValue; 
     // NOTE: don't forget to correctly add the value to the url 
     return $http(emailValidationUrl + value).then(function (validationResponse) { 
      // NOTE: return rejected promise if validation failed else true 
     }); 

     }; 
    } 
    }; 
}); 

Как вы можете использовать его в вашем случае:

<label> 
    <span class="embedded-label">Email</span> 
    <input ng-model="formData.email" 
      async-email-validator="http://www.example-service-uri.com/" 
      type="email" 
      name="email" 
      placeholder="Email" 
      required/> 
    <span class="message" ng-show="<FormNameHere>.email.$error.emailValidator"> 
     {{emailValidationMessage}} 
    </span> 
</label> 

Это будет правильное решение, так как оно осуществляется с угловой нг-модели проверки, которая учитывает обоснованность модели тоже.