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

Question

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

不幸的是，我无法利用 Angular 提供的现有表单自定义验证（即 $asynchrounous 验证器和 $q.defer），因为我必须使用旧版本的 Angular 1.2.26。您能否提供一些 hints/examples 如何实现的信息？我正在努力，但我仍然发现自定义指令有点困难，而且我找不到自定义验证的示例（除了那些基于 Angular 1.3 $asynch 验证器的示例）。

提前致谢

Answer 1

您可以在指令的 link 或控制器函数中轻松使用 $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 验证，如果您在控制器中控制验证，它会在以后给您带来很多问题。

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

Custom Angular JS directive for validation

javascript

forms

validation

angularjs