angularjs 指令中的 require: 'ngModel'

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

 

html 

 <label><i class="mes_sign">*</i>姓名</label>
   <div class="pr">
        <input type="text" ng-model="saUserCheck.userName"   required warn-text="姓名" >
   </div>

 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('<div class="validation-errorText"></div>');
                                    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:

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