7

我是 angular.js 的新手

 <input type="email" disabled='disabled' name="email" ng-model="userInfo.emailAddress" 
                                    class="input-xlarge settingitem" style="height:30px;"> 

<span ng-show="myForm.email.$error.email" class="help-inline" style="color:red;font-size:10px;">
                                        Not a Valid Email Address</span>

我有电子邮件字段，对应于我需要在服务器上检查它是否已经存在于数据库中。

谁能指导我完成如何使用角度指令和服务来检查服务器的步骤

4

1 回答 1

9

我建议编写一个插入NgModelController#$parsers管道的指令（检查来自http://docs.angularjs.org/guide/forms的“自定义验证” ）。

这是此类指令的草图：

.directive('uniqueEmail', ["Users", function (Users) {
  return {
    require:'ngModel',
    restrict:'A',
    link:function (scope, el, attrs, ctrl) {

      //TODO: We need to check that the value is different to the original

      //using push() here to run it as the last parser, after we are sure that other validators were run
      ctrl.$parsers.push(function (viewValue) {

        if (viewValue) {
          Users.query({email:viewValue}, function (users) {
            if (users.length === 0) {
              ctrl.$setValidity('uniqueEmail', true);
            } else {
              ctrl.$setValidity('uniqueEmail', false);
            }
          });
          return viewValue;
        }
      });
    }
  };
}])

这Users.query是一个异步调用，用于检查电子邮件是否唯一。当然，您应该用对后端的调用来代替它。

完成后，可以像这样使用该指令：

<input type="email" ng-model="user.email" unique-email>

该指令的示例取自Angular应用程序，一些 AngularJS 社区成员试图将其放在一起以说明常见用例。可能值得一试，看看所有这些如何在完整的应用程序中组合在一起。

于 2013-02-20T11:05:05.097 回答