Question

我通过参考angularjs的官方文档正确地完成了它。但是在指令的链接方法中，当我使用$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

使用

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

在你的模糊事件中，即

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

Answer 2

问题在于：

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

Angular对jquery事件一无所知。他们没有上升消化运行。所以你必须通过$ scope手动运行它。$ applyAsync（）

Here you can read more about applyAsync

Answer 3

在您的示例中，检查输入是否为空并且是否对应于模式。我认为你的方法对于这个功能来说非常困难。我建议您查看属性ng-required和ng-pattern来执行此操作。这是我认为更简单的方式

这里有一个用来说明它的人：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
          }

在angularjs中创建自定义指令

3 个答案: