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

Question

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

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

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

Answer 1

我建议写一个插入NgModelController#$ parsers管道的指令(查看http://docs.angularjs.org/guide/forms的 "Custom Validation" ).

这是一个这样一个指令的草图:

.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社区成员试图将它们放在一起以说明常见的用例.可能值得一试在整个应用程序中查看所有这些是如何组合在一起的.