angularjsでカスタムディレクティブを作成する

Question

私は正しくこれをanglejsの公式ドキュメントを参照して行っています。 は、しかし、私は$setValidity()メソッドを使用して妥当性を設定ディレクティブのリンク方法、で、それは{{formname.controlname.$error.validationErrorKey}}

は私がやっているエラー、または間違いを追跡するために私を助けてください使用してビュー部分に反映されません。ここでは、事前に

おかげ

<form name="form" novalidate> 
    URL <input type="text" ng-model="myURL" name="myURL" my-url /> {{form.myURL.$error.myUrlError}} 
    <span class="errorMessage" ng-show="form.myURL.$dirty && form.myURL.$error.myUrlError"> 
     please enter correct url 
    </span> 
</form> 

validationModule.directive("myUrl", function($window) {  
    //return Directive Definition Object (DDO) 
    return{ 
     restrict:"A", 
     require: 'ngModel', 
     link: function(scope, elm, attrs, ctrl) { 
      elm.bind('blur',function() { 
       if (ctrl.$isEmpty(ctrl.$viewValue)) { 
        console.log('isEMpty-' + new Date()); 
        ctrl.$setValidity("myUrlError", true); 
       } else { 
        var URL_REGEXP= /https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,}/; 
        if (URL_REGEXP.test(ctrl.$viewValue)) { 
         console.log("valid-" + new Date()); 
         ctrl.$setValidity("myUrlError", true); 
        } else { 
         console.log("invalid-" + new Date()); 
         ctrl.$setValidity("myUrlError", false); 
        } 
       } 
      }); //end if 'blur' event listener 
     }//end of link function 
    };//end of DDO  
}); 

Answer 1

は問題です：

elm.bind('blur',function(){ 

角度jQueryのイベントについて何も知りません。彼らはダイジェストランを起こさない。だから、$の範囲によっててmanualyそれを実行する必要があります。$ applyAsync（）

Here you can read more about applyAsync

Answer 2

をあなたのサンプルでは入力が空で、対応している場合のパターンかどうかをチェック。私はあなたのアプローチがこの機能にとって非常に難しいと思います。 これを行うには、属性ng-requiredとng-patternを参照することをお勧めします。 https://plnkr.co/edit/1hFMlB2IzuWpV7v8TOUP?p=preview

ctrl.$validators.myUrlValidator = function(modelValue, viewValue) { 
      console.log('vbalidate') 
      if(!viewValue || viewValue == "") { 
       return false; 
      } 
      if(!URL_REGEXP.test(viewValue)){ 
       return false; 
      } 
      return true 
      } 

Answer 3

使用

scope.$apply(attrs.my-url); 

： https://plnkr.co/edit/pRqXfsjduvQGuRwDBuUL?p=preview

URL <input type="text" ng-model="myURL" name="myURL" required="true" ng-pattern="/https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,}/" /> {{form.myURL.$error}} 

もう一つの方法は、カスタムバリデータを作成することです：それは私がそれを説明するためにここで

plunker考えるより簡単な方法です

内部あなたのぼかしイベント、すなわち

element.bind('blur', function() { 
        scope.$apply(attrs.attrs.my-url); 
       } 
      });