自定義Angular JS指令進行驗證

Question

我是JavaScript和Angular JS的新手。 我必須編寫一個自定義指令來驗證在.aspx頁中傳遞的輸入字段的內容。 更准確地說，我必須檢查輸入中傳遞值的用戶名是否已經存在。 在我的指令中，我必須調用一個服務，該服務檢查數據庫中的重復項，然后根據結果，我必須執行成功回調/錯誤回調，並返回一個包含有關驗證檢查信息和錯誤消息的對象。 特別是在最后一部分中，我涉及回調和返回帶有信息的對象（在我的版本中，我不能使用$ .defer）。

不幸的是，我無法利用Angular提供的表單的現有自定義驗證（即$ asynchrounous驗證程序和$ q.defer），因為我必須使用較舊版本的Angular 1.2.26。 您能否提供一些有關實現方法的提示/示例？ 我正在努力，但是我仍然覺得自定義指令有點困難，我找不到自定義驗證的示例（基於Angular 1.3 $ asynch驗證程序的示例除外）。

先感謝您

Answer 1

您可以輕松地在指令的鏈接或控制器函數中使用$ http服務，並對響應數據進行操作。 您到底能解決什么問題？

Answer 2

您可以為此編寫自己的指令： 示例

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>

請注意，此指令不是可重用的指令，但可以滿足您的要求。 不要在控制器中執行此操作，我花了很多時間進行角度驗證，如果您要在控制器中控制驗證，則稍后會引起很多問題。