Javascript ng消息的Angular 1.5自定义验证指令

我正在研究ng消息的自定义指令，其中在输入字段中添加一个指令“自定义验证”：

 <input name="inputName" ng-model="vm.inputName" custom-validation="vm.validationConfig" class="form-control" />

添加指令输入后，应简单地按如下方式包装：

   <form name="inputName-form" ng-class="{ 'has-error':  inputName-form.inputName.$invalid }" novalidate>
        <input name="inputName" type="number" ng-model="inputName" max="100" class="form-control" required>
        <div ng-messages="inputName-form.inputName.$error" class="error-messages" role="alert"  ng-if="inputName-form.inputName.$invalid ">
            <div ng-message="number" class="message">Should be a number</div>
            <div ng-message="max" class="message">The number is too large.</div>
            <div ng-message="required" class="message">The field is required.</div>
        </div>
    </form>

(function () {
    "use strict";
    var module = angular.module('app');

    function isObject(obj) {
        return obj === Object(obj);
    }
    var validate = function () {
        return {
            restrict: 'A',
            replace: true,
            transclude: "element",
            scope: {
            },
            link: function (scope, element, attrs) {
                var input = attrs.name;
                //for some reason there was a space with the name
                input = input.split(' ').join('');
                scope.inputName = input;
                //create a unique form name
                scope.formName = input + "-form";
                //remove doubled form control
                element.removeClass('form-control');
                //get configuration
                scope.config = scope.$parent.vm.validationConfig;
                //object to set if form is valid or not
                scope.isValid = scope.$parent.vm.formValid;
                var formInputId = scope.formName + "." + scope.inputName;
                scope.$watch('scope.formName.$valid', function (newVal) {
                    scope.isValid[formInputId] = newVal;
                });
                var i, obj, key, val;
                scope.input = scope[attrs.name];
                //parse configuration object
                if (scope.config !== undefined) {
                    for (i = 0; i < scope.config.rules.length; i++) {
                        if (isObject(scope.config.rules[i])) {
                            obj = scope.config.rules[i];
                            key = Object.keys(obj)[0];
                            val = obj[key];
                            attrs.$set(key, val);
                        } else {
                            attrs.$set(scope.config.rules[i], true);
                        }
                    }
                    //parse messages
                    scope.msg = '';
                    for (i = 0; i < scope.config.messages.length; i++) {
                        obj = scope.config.messages[i];
                        key = Object.keys(obj)[0];
                        val = obj[key];
                        var newMessage = '<div ng-message=' + key + '>' + val + '</div>';
                        scope.msg = scope.msg.concat(newMessage);
                    }
                }
            },
            template: '<form name="{{formName}}"><div ng-transclude></div><div ng-messages="formName[inputName].$error">{{msg}}</div></form>'
        };
    };
    module.directive('customValidation', validate);
}());

应该是一个数字
这个数字太大了。
该字段为必填字段。

到目前为止，我的指令如下所示：

   <form name="inputName-form" ng-class="{ 'has-error':  inputName-form.inputName.$invalid }" novalidate>
        <input name="inputName" type="number" ng-model="inputName" max="100" class="form-control" required>
        <div ng-messages="inputName-form.inputName.$error" class="error-messages" role="alert"  ng-if="inputName-form.inputName.$invalid ">
            <div ng-message="number" class="message">Should be a number</div>
            <div ng-message="max" class="message">The number is too large.</div>
            <div ng-message="required" class="message">The field is required.</div>
        </div>
    </form>

(function () {
    "use strict";
    var module = angular.module('app');

    function isObject(obj) {
        return obj === Object(obj);
    }
    var validate = function () {
        return {
            restrict: 'A',
            replace: true,
            transclude: "element",
            scope: {
            },
            link: function (scope, element, attrs) {
                var input = attrs.name;
                //for some reason there was a space with the name
                input = input.split(' ').join('');
                scope.inputName = input;
                //create a unique form name
                scope.formName = input + "-form";
                //remove doubled form control
                element.removeClass('form-control');
                //get configuration
                scope.config = scope.$parent.vm.validationConfig;
                //object to set if form is valid or not
                scope.isValid = scope.$parent.vm.formValid;
                var formInputId = scope.formName + "." + scope.inputName;
                scope.$watch('scope.formName.$valid', function (newVal) {
                    scope.isValid[formInputId] = newVal;
                });
                var i, obj, key, val;
                scope.input = scope[attrs.name];
                //parse configuration object
                if (scope.config !== undefined) {
                    for (i = 0; i < scope.config.rules.length; i++) {
                        if (isObject(scope.config.rules[i])) {
                            obj = scope.config.rules[i];
                            key = Object.keys(obj)[0];
                            val = obj[key];
                            attrs.$set(key, val);
                        } else {
                            attrs.$set(scope.config.rules[i], true);
                        }
                    }
                    //parse messages
                    scope.msg = '';
                    for (i = 0; i < scope.config.messages.length; i++) {
                        obj = scope.config.messages[i];
                        key = Object.keys(obj)[0];
                        val = obj[key];
                        var newMessage = '<div ng-message=' + key + '>' + val + '</div>';
                        scope.msg = scope.msg.concat(newMessage);
                    }
                }
            },
            template: '<form name="{{formName}}"><div ng-transclude></div><div ng-messages="formName[inputName].$error">{{msg}}</div></form>'
        };
    };
    module.directive('customValidation', validate);
}());

（函数（）{
“严格使用”；
var模块=角度模块（'app'）；
功能对象（obj）{
返回obj==对象（obj）；
}
var validate=函数（）{
返回{
限制：“A”，
替换：正确，
转移：“元素”，
范围：{
},
链接：函数（范围、元素、属性）{
var输入=attrs.name；
//出于某种原因，有一个空格的名称
input=input.split（“”）.join（“”）；
scope.inputName=输入；
//创建唯一的表单名称
scope.formName=input+“-form”；
//删除表单控件
element.removeClass（'form-control'）；
//获取配置
scope.config=scope.$parent.vm.validationConfig；
//对象设置窗体是否有效
scope.isValid=scope.$parent.vm.formValid；
var formInputId=scope.formName+“+scope.inputName；
scope.$watch（'scope.formName.$valid'，函数（newVal）{
scope.isValid[formInputId]=newVal；
});
var i，obj，键，val；
scope.input=scope[attrs.name]；
//解析配置对象
如果（scope.config！==未定义）{
对于（i=0；i

与模板相关的此指令至少有两个问题

<div ng-messages="formName[inputName].$error">{{msg}}</div>

{{msg}

我不知道如何正确访问formName.inputName.$error

{{msg}}正在将所有ng消息显示为字符串，我以前试图编译它，但它不起作用

---

谢谢

我终于用下面的代码解决了这个问题

(function () {
    "use strict";
    var module = angular.module('app');
    function isObject(obj) {
        return obj === Object(obj);
    }
    var validate = function ($compile) {
        return {
            restrict: 'A',
            scope: {},
            link: function (scope, element, attrs) {
                scope.formName = attrs.name + "Form";
                scope.ngMsgs = scope.formName + "." + attrs.name + ".$error";
                scope.config = scope.$parent.vm.validationConfig;
                var i, obj, key, val;
                if (scope.config !== undefined) {
                    for (i = 0; i < scope.config.rules.length; i++) {
                        if (isObject(scope.config.rules[i])) {
                            obj = scope.config.rules[i];
                            key = Object.keys(obj)[0];
                            val = obj[key];
                            attrs.$set(key, val);
                        } else {
                            attrs.$set(scope.config.rules[i], true);
                        }
                    }
                    scope.msg = '';
                    for (i = 0; i < scope.config.messages.length; i++) {
                        obj = scope.config.messages[i];
                        key = Object.keys(obj)[0];
                        val = obj[key];
                        var newMessage = '<div ng-message=' + key + '>' + val + '</div>';
                        scope.msg = scope.msg.concat(newMessage);
                    }
                }
                var wrapper = angular.element
                    (
                    '<form name=' + scope.formName + ' ng-class="{ ' + "'has-error'" + ':  ' + scope.formName + '.' + attrs.name + '.$invalid }" novalidate>'
                    );
                element.after(wrapper);
                element.removeAttr("custom-validation");
                wrapper.append(element);
                wrapper.append("<div ng-messages=" + scope.ngMsgs + " class='error-messages' role='alert' ng-if='" + scope.formName + '.' + attrs.name + ".$invalid'>" + scope.msg + "</div>");
                $compile(wrapper)(scope);
            }
        };
    };
    module.directive('customValidation', validate);
}());

（函数（）{
“严格使用”；
var模块=角度模块（'app'）；
功能对象（obj）{
返回obj==对象（obj）；
}
var validate=函数（$compile）{
返回{
限制：“A”，
作用域：{}，
链接：函数（范围、元素、属性）{
scope.formName=attrs.name+“Form”；
scope.ngMsgs=scope.formName+“+attrs.name+”$error”；
scope.config=scope.$parent.vm.validationConfig；
var i，obj，键，val；
如果（scope.config！==未定义）{
对于（i=0；i