create benutzerdefinierte Direktive in angularjs

Question

Ich habe es richtig gemacht, indem ich für offizielle Dokumente von angularjs referenziere. Aber in Verbindung Methode der Richtlinie, wenn ich die Gültigkeit mit $setValidity() Methode festgelegt, es spiegelt nicht Teil in Sicht mit {{formname.controlname.$error.validationErrorKey}}

Bitte mir helfen, den Fehler zu verfolgen, oder Fehler, die ich tue.

Vielen Dank im Voraus

<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

Hier ist das Problem:

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

Angular wissen nichts über jquery Ereignisse. Sie steigen nicht verdaut laufen. Also muss man es händisch von $ Umfang läuft. $ ApplyAsync()

Here you can read more about applyAsync

Answer 2

In Ihrem Proben Sie überprüfen, ob Eingabe leer ist und wenn entsprechen ein Muster. Ich denke, Ihr Ansatz ist für diese Funktion so schwierig. Ich empfehle Ihnen, Attribut ng-required und ng-pattern zu sehen, um das zu tun. Es ist ein einfacher Weg, denke ich

hier ein Plunker zu illustrieren es: 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}} 

Eine weitere Möglichkeit, eine benutzerdefinierte Validator zu erstellen ist: 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

Verwendung

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

innerhalb Ihr Unschärfereignis, d. h.

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