angularjs에서 사용자 지정 지시문을 만듭니다.

Question

angularjs의 공식 문서를 참조하여 올바르게 수행했습니다. 는하지만 $setValidity() 방법을 사용하여 유효성을 설정 지시어의 연결 방법, 그것은 {{formname.controlname.$error.validationErrorKey}}

내가 뭐하는 거지 오류 또는 실수를 추적하기 위해 도와주세요 사용하여 볼 부분에 반영되지 않습니다.

이 각도

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

가 JQuery와 이벤트에 대한 아무것도 몰라 : 사전 여기

<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

에서

덕분 문제입니다. 그들은 다이제스트 런을하지 않습니다. 그래서 당신은 $ 범위에서 수동으로 실시를 실행해야합니다. $ 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); 
       } 
      });