angularjs 指令中的 require: 'ngModel'

自定义指令中使用require:‘ngModel’ 这个选项来增强对表单的操作,如表单的验证:表单为必填项,符合什么样的验证规则。。。

 

html 

 
   

 css

根据自己的需求写样式,如:

/*表单不符合要求:带红框*/
	.ng-invalid{
    border-width:1px!important;
    border-color: #e66a7b!important;
      }

指令

  .directive('warnText', ['$parse','$timeout', function ($parse,$timeout) {
            return {
                require: 'ngModel',
                restrict: 'A',
                compile: function () {
                    return function ($scope, element, attrs, ctrl) {
                        var ele = $(element); // 当前需要校验节点 jQuery对象
                        var errorTextEle; // 错误提示元素 jQuery对象

                        var checkFunc = function () {
                            $timeout(function (){
                                //判断
                                if (!ele.attr('errorText')) {
                                    ele.after('
'); ele.attr('errorText', true); errorTextEle = ele.next(); element.on('focus', function () { errorTextEle.hide(); }); } if (ctrl.$invalid) { if (ctrl.$error.required) { errorTextEle.text('该项为必填项') } else if (ctrl.$error.minlength) { errorTextEle.text(attrs.warnText + '最小长度为' + attrs.ngMinlength) } else if (ctrl.$error.maxlength) { errorTextEle.text(attrs.warnText + '最大长度为' + attrs.ngMaxlength) } else if (ctrl.$error.email) { errorTextEle.text('请输入正确的邮箱格式') } else if (ctrl.$error.pattern) { errorTextEle.text("请输入正确的" + attrs.warnText); } else if(ctrl.$error.customerName){ //表格 errorTextEle.text("请输入正确的" + attrs.warnText); } errorTextEle.show() } else { errorTextEle.hide() } },100) }; if(ele.prop("tagName") == "INPUT" || ele.prop("tagName") == "TEXTAREA"){ element.on('blur', checkFunc); }else if(ele.prop("tagName") == "SELECT"){ element.on('change', checkFunc); } $scope.$on('$destroy',function () { element.off(); }); } } } }])

 可以在触发指令方法的时候打印一下ngModel:

angularjs 指令中的 require: 'ngModel'_第1张图片

具体的是什么意思可以参考一下:https://blog.csdn.net/zpz_326/article/details/73527863

 

你可能感兴趣的:(angularjs)