Question

我是JavaScript和Angular JS的新手。我必须编写一个自定义指令来验证.aspx页面中传递的输入字段的内容;更确切地说，我必须检查输入中传递的值的用户名是否已存在。在我的直接上，我必须调用一个服务来检查数据库中的重复项，然后根据结果我必须执行成功的回调/错误回调，并返回一个包含有关验证检查和消息到diplay的信息的对象。特别是我最后一部分关于回调和返回带有信息的对象（在我的版本中我不能使用$ .defer）。

不幸的是，我不能利用已经存在的Angular提供的表单的自定义验证（即$ asynchrounous验证器和$ q.defer），因为我必须使用旧版本的Angular 1.2.26。你能否提供一些关于如何实现它的提示/示例？我努力尝试但仍然发现自定义指令有点困难，我找不到自定义验证的例子（基于Angular 1.3 $ asynch验证器的那些除外）。

提前谢谢

Answer 1

您可以在指令的链接或控制器功能中轻松使用$ http服务，并使用响应数据进行操作。究竟有什么问题可以让你更清楚？

Answer 2

您可以为此编写自己的指令：example

app.directive('asyncNameCheck', function($http){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attr, ngModel){
      elm.bind('input', function(){
        ngModel.$setValidity('asyncValid', false);
        $http.get('http://graph.facebook.com/facebook')
          .success(function(data){
            ngModel.$setValidity('asyncValid', true);
          });
      })
    }
  }
})

并在html中

<form name="myform">
  <input name="testfield" async-name-check required ng-model="test"/>
  <p ng-show="myform.testfield.$error.asyncValid">This field is invalid</p>
</form>

请注意，此指令不是可重复使用的指令，但适用于您的要求。不要在控制器中执行此操作，我花了很多时间进行角度验证，如果你在控制器中控制验证，它将在以后引起很多问题。

用于验证的自定义Angular JS指令

2 个答案: