Асинхронная проверка в angularjs 1.2

Я пытаюсь создать директиву валидации электронной почты, которая вызывает вызов ajax, чтобы узнать, существует ли электронная почта. Я не могу обновить валидацию для этого поля.Асинхронная проверка в angularjs 1.2

app.directive('uniqueValidator', ['UniqueValidatorService',function(uniqueValidatorService) 
    { 
     var linkFn=function(scope, elem, attrs,ngModel) 
     { 
      var vm=this; 
      vm.ngModel=ngModel; 
      vm.scope=scope; 
      var config=scope.$eval(attrs.uniqueValidator); 
      console.log('Value of the atribute'+window.angular.toJson(config)); 
      /*If the value is truly unique then we would want to set validation as passed*/ 
      vm.successCallback=function successCallback(unique){ 
       vm.ngModel.$setValidity('unique',false); 
       console.log('Value of validity success case'+vm.ngModel.$valid); 
      }; 
      /*Set validity as false to make sure we have a */ 
      vm.errorCallback=function errorCallback(error){ 
       ngModel.$setValidity('unique',true); 
       console.log('Value of validity'+ngModel.$valid); 
      }; 
      var blurHandler=function(event){ 
       console.log('In blur'+ngModel); 
       if (!ngModel || !elem.val()) return; 
       var currentValue=elem.val(); 
       uniqueValidatorService.checkUniqueness(config.url,config.property,currentValue).then(function(data){ 
        vm.successCallback(data); 

       },function(error){vm.errorCallback(error)}); 
      } 
      elem.bind('blur',blurHandler.bind(vm)); 

     }; 
     return { 
      restrict: 'A', 
      scope:{}, 
      require:'ngModel', 
      link: linkFn 
     }; 
    } 
    ]) 
    .directive('uniqueErrorMessage',function(){ 
     var linkFn= function(scope, elem, attrs,ngModel){ 
      scope.message='Email is in use'; 
      console.dir(scope.registrationForm.email.$error); 
     }; 
     return { 
      restrict: 'E', 
      replace:true, 
      template:'<span ng-show="registrationForm.email.$dirty && registrationForm.email.$error.unique" >{{message}}</span>', 
      link: linkFn 
     }; 

     });

Уникальная директива сообщение об ошибке не получает обновляется должным образом в соответствии с проверкой outcome.Even если проверка проходит, она по-прежнему показывает на DOM. Кроме того, я вижу, что ngModel. $ Valid для входного элемента подходит как истина, даже если проверка не выполнена. Я попытался инкапсулировать $ setValidity внутри области. $ Apply, но это приводит к ошибке дайджеста. Любая помощь в этом Учитывая это appreciated.I не будет иметь возможность включать проверку маршрутизатора ▽ или обновить angularjs версию, чтобы использовать новую среду проверки

Спасибо, Рахул

источник

2015-01-11 Rahul Ravindran

Вот пример, который может помочь:

var app = angular.module('app', []); 
 
app.controller('ctrl', function() {}); 
 

 
app.directive('unique', function(userFactory) { 
 
    return { 
 
    restrict: 'A', 
 
    require: 'ngModel', 
 
    link: function(scope, element, attr, ngModelController) { 
 
     element.on('blur', function() { 
 
     if (ngModelController.$viewValue != '') { 
 
      userFactory.tryUsername(ngModelController.$viewValue) 
 
      .then(
 
       function succcess(result) { 
 
       ngModelController.$setValidity('unique', true); 
 
       }, 
 
       function fail(result) { 
 
       ngModelController.$setValidity('unique', false); 
 
       } 
 
      ); 
 
     } 
 
     }); 
 
    } 
 
    } 
 
}); 
 

 
app.factory('userFactory', function($q) { 
 
    return { 
 
    tryUsername: function(username) { 
 

 
     var deferred = $q.defer(); 
 
     if (username == 'john') 
 
     deferred.reject('john already exists!'); 
 
     else if (username == 'tim') 
 
     deferred.resolve('tim'); 
 
     else if (username == 'hank') 
 
     deferred.reject('hank already exists!'); 
 
     else 
 
     deferred.resolve(username); 
 

 
     return deferred.promise; 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app" ng-controller="ctrl"> 
 
    <form name="form"> 
 
    Enter a Username (john and hank are taken): 
 
    <br /> 
 
    <input type="text" ng-model="username" name="username" unique /> <span ng-show="form.username.$error.unique">Username is taken!</span><br /> 
 
    {{ form.username.$error }} 
 
    </form> 
 
</body>

источник

2015-01-11 15:14:31 pixelbits

ОТПРАВИТЬ ОТВЕТ НА ВАС, на самом деле это была проблема с тем, что я не правильно разобрал HTTP-ответ в сервисной функции. Спасибо за вашу помощь! –

Асинхронная проверка в angularjs 1.2

ответ

Смежные вопросы