在angularjs中創建自定義指令

我已經通過參考來自angularjs的官方文檔正確地完成了它。但是在指令的鏈接方法，當我使用$setValidity()方法設置的有效性，它不會反映在使用{{formname.controlname.$error.validationErrorKey}}在angularjs中創建自定義指令

請幫我跟蹤誤差或錯誤，我做圖的一部分。

在此先感謝

<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  
});

來源

2016-06-24 Amit Patil

這裏的問題是：

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

角一無所知jQuery的事件。他們不會提高消化能力。所以，你必須通過$範圍manualy運行它。$ applyAsync（）

Here you can read more about applyAsync

來源

2016-06-24 06:31:26 Vitalii

在您的例子中，你是否輸入爲空，如果對應的模式。我認爲你的方法對於這個功能來說非常困難。我建議你看看屬性ng-required和ng-pattern來做到這一點。這是一個更簡單的方法，我認爲

這裏一個plunker來說明吧：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}}

另一種方法是創建一個自定義的驗證：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 
      }

來源

2016-06-24 06:36:21 Silvinus

使用

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

裏面您的模糊事件，例如

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

來源

2016-06-24 06:59:00 sheelpriy

在angularjs中創建自定義指令

回答

相關問題