Angularjs - 检查指令中模糊的重复电子邮件

Question

当我想检查邮件是否已在数据库中注册时遇到了问题，但仅限于 blur 事件（我不希望它检查每个更改）。所以我写了一个指令，我可以在我的应用程序的其他地方重复使用。但问题是即使我仍然没有模糊，指令也会继续检查，这是我的 plnkr 供参考：http://plnkr.co/edit/eUPFxIc78Wkl4mCX6hrk?p=preview

这是我的指令代码：

app.directive('checkEmail', function(userService){
return{
    restrict: "A",
    require:'ngModel',
    link: function( scope, ele, attrs, ctrl ){

        ele.bind('blur', function(){
            console.log("Run in blur!");

            ctrl.$parsers.unshift(function( email ){
                console.log("Email is ", email);

                // Checking to see if the email has been already registered
                if( ele.val() && userService.isDuplicateEmail(email) ){
                    ctrl.$setValidity('isDuplicatedEmail', true );                        
                }else{
                    ctrl.$setValidity('isDuplicatedEmail', false );
                }
            });

        })
    }
}

})

抱歉，我是 Angular 新手，这个简单的任务已经让我发疯了。请看一下我的指令并告诉我我能做些什么来解决这个问题。提前致谢

Answer 1

如果您只需要在模糊时检查电子邮件，那么您不需要将其传递到ng-model 的$parsers 数组中。模糊时只需更改有效性即可。

DEMO

类似这样的：

   ele.bind('blur', function(){
      ctrl.$setValidity('isDuplicatedEmail', ctrl.$viewValue && userService.isDuplicateEmail(ctrl.$modelValue));
      scope.$digest();
   });

或者，如果您从服务器异步检查电子邮件，那么这可能对您不利。下面的例子是一个更好的答案：

DEMO

下面的服务，请求来自服务器的电子邮件列表并解决电子邮件是否存在（真）或不存在（假）的承诺。

app.service('userServiceAsync', function($http, $q) {

  this.isDuplicateEmailAsync = function(email) {
    var deferred = $q.defer(), i;

    $http.get('users.json')
      .success(function(users) {
        for(i = 0; i < users.length; i++) {
          if(users[i].email == email) {
            deferred.resolve(true);
            return;
          }
        }
        deferred.resolve(false);
      })

      .error(function() {
        deferred.resolve(false);
      });

    return deferred.promise;
  };

});

下面的指令将isDuplicatedEmail 有效性键设置为真或假，具体取决于userServiceAsync.isDuplicateEmailAsync () 方法的解析值。作为奖励，我在ngModelController 的对象中添加了一个行列式键来检查异步请求是否仍在进行中（使用__CHECKING_EMAIL 键）。

app.directive('checkEmailAsync', function(userServiceAsync) {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      elem.bind('blur', function() {
        ctrl.__CHECKING_EMAIL = true;
        userServiceAsync.isDuplicateEmailAsync(ctrl.$viewValue).then(function(hasEmail) {
          ctrl.$setValidity('isDuplicatedEmail', !hasEmail);
        })['finally'](function() {
          ctrl.__CHECKING_EMAIL = false;
        });
      });
    }
  }
});

HTML

  Check Email Asynchronously
  <input type="text" name="emailAsync" placeholder="Email" ng-model="emailAsync" check-email-async required />
  <div ng-show="registerForm.emailAsync.__CHECKING_EMAIL">
    Checking Email...
  </div>

Answer 2

@ryeballar ，对不起，但这对我来说仍然不合适。我已经修改了您的 plnk，使其仅适用于异步。所以我的困惑是这条线 ctrl.$setValidity('isDuplicatedEmail', !hasEmail);，您可以访问新plnk here

如果我之前没有输入“！”，那个布尔值似乎不正确，你可以在控制台日志中检查它并查看它的值，就像电子邮件没有重复一样，服务返回false，然后我们将有效性设置为"TRUE"，以使其看起来像"RIGHT"。

指令如下：

elem.bind('blur', function() {
    ctrl.__CHECKING_EMAIL = true;
    userServiceAsync.isDuplicateEmailAsync(ctrl.$viewValue).then(function(hasEmail) {
        console.log("hasEmail: ", hasEmail);
        console.log("!hasEmail: ", !hasEmail);

        scope.hasEmail = hasEmail;
        // HERE IS THE CONFUSION, WHY !hasEmail works correctly ????
        // THIS WILL GIVE THE WRONG ANSWER
        // ctrl.$setValidity('isDuplicatedEmail', hasEmail);

        // THIS WILL GIVE THE RIGHT ANSWER
        ctrl.$setValidity('isDuplicatedEmail', !hasEmail);


    })['finally'](function() {
      ctrl.__CHECKING_EMAIL = false;
    });
  });

Answer 3

请在此处查看工作示例http://plnkr.co/edit/lT9kO4nU0OeBG3g8lULG?p=preview

请不要忘记添加范围。$apply 以更新您的 UI

app.directive('checkEmail', function(userService) {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function(scope, ele, attrs, ctrl) {

      ele.bind('blur', function() {
        scope.$apply(function() {
          console.log("Run in blur!");
          // Checking to see if the email has been already registered
          if (userService.isDuplicateEmail(scope.email)) {

            ctrl.$setValidity('isDuplicatedEmail', false);


            return scope.email;;
          } else {

            ctrl.$setValidity('isDuplicatedEmail', true);

            return scope.email;
          }
        });


      })
    }
  }
})

Answer 4

$parser.unshift 在模型更改时执行，但您确实想要“模糊”，...检查 ngModelOptions 的“updateOn”或删除 unshift...

您也可以使用 ctrl.$viewValue。

        ele.bind('blur', function(){
            console.log("Run in blur!");

            //ctrl.$parsers.unshift(function( email ){
                email = ctrl.$viewValue;
                console.log("Email is ", email);

                // Checking to see if the email has been already registered
                if( !!email && userService.isDuplicateEmail(email) ){
                    ctrl.$setValidity('isDuplicatedEmail', true );

                    return email;;
                }else{
                    ctrl.$setValidity('isDuplicatedEmail', false );

                    return email;
                }

            //});

        })