检查angular.js中服务器上是否已存在数据

时间:2013-02-20 10:44:28

标签: javascript angularjs

我是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>

我有电子邮件字段,如果数据库中已经存在,我需要在服务器上检查。

任何人都可以指导我完成如何使用角度指令和服务来检查服务器

1 个答案:

答案 0 :(得分: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-app,其中一些AngularJS社区成员试图将它们放在一起以说明常见的用例。在完整的应用程序中查看所有这些是如何组合在一起的,可能值得一试。