Angularjs：对指令生成的输入字段进行表单验证

我构建了一个指令，该指令基于meta（

$scope.meta

）数据生成一个输入字段。 我的问题是支持angular的表单验证

普朗克：

说明：指令采用一个

meta

参数，该参数描述输入字段的类型以及呈现字段的其他相关信息。指令上定义的所有属性都将复制到元素，并在编译和链接后最终替换该指令

视图：

这是元信息，它告诉输入字段是什么样子的（是文本吗？日期？等等）

指令声明：

app.directive('polyField', function($compile) {
    var linkFn = function(scope, element, attributes) {
        // create input element depending on the type
        var template = document.createElement("input");
        template.type = scope.storage[attributes.key].type;

        // copy all attributes
        for (var attr in attributes.$attr) {
            if (attributes.$attr[attr] == 'ng-model') {
                template.setAttribute('ng-model', attributes[attr] + '.' + attributes.key);
            } else {
                template.setAttribute(attributes.$attr[attr], attributes[attr]);
            }
        }

        // template compilation, linking and element replacement
        template = angular.element(template.outerHTML);
        var linkTemplate = $compile(template);
        var domElement = linkTemplate(scope);
        element.replaceWith(domElement);
    }

    var directive = {
        restrict: 'E',
        scope: { 
            meta: '=',
            storage: '=ngModel',
            key: '=',
        },
        link: linkFn
    };

    return directive;
  });

一些想法：
每个指令都创建一个独立的作用域，因此，在指令

userForm

内部是看不见的，但是，从指令的作用域和父作用域中可以看到双向绑定的

storage

（ng模型），如果userForm看到

storage

内部的内容，应该可以，不是吗

我试图将

userForm

传递到指令范围：

// directive
scope: {
        meta: '=',
        storage: '=ngModel',
        key: '=',
        userForm: '='
}

// template
<poly-field user-form="userForm" ng-model="storage" meta="meta" key="username" name="username" ng-minlength="3" ng-maxlength="8"></poly-field>

//指令
范围：{
meta:“=”，
存储：'=ngModel'，
键：'='，
用户表单：'='
}
//模板

但没有效果

当我查看指令范围时，在

userForm

字段中，我看到输入字段实际上是

$dirty:false

，

$invalid:true

，在我输入用户名/电子邮件字段之后

在源代码中，似乎正确应用了验证类：

ng valid minlength

ng dirty

ng invalid

ng invalid maxlength

不过，没有显示任何验证错误

---

我能用它做些什么吗？

为了使Angular的表单验证能够启动，

ngModel

在其控制器的实例化阶段（预链接阶段之前）查找父

ngForm

/

表单

指令

由于在将元素添加到DOM之前编译并链接该元素，因此当时没有父元素，因此无法注册

您只需要首先将元素插入DOM，然后编译并链接它

$scope.storage = {
    username: "Kitkat",
    email: "flying@kitkat.com"
};

 $scope.meta = {
    username: { type: "text" },
    email: { type: "text" }
};

app.directive('polyField', function($compile) {
    var linkFn = function(scope, element, attributes) {
        // create input element depending on the type
        var template = document.createElement("input");
        template.type = scope.storage[attributes.key].type;

        // copy all attributes
        for (var attr in attributes.$attr) {
            if (attributes.$attr[attr] == 'ng-model') {
                template.setAttribute('ng-model', attributes[attr] + '.' + attributes.key);
            } else {
                template.setAttribute(attributes.$attr[attr], attributes[attr]);
            }
        }

        // template compilation, linking and element replacement
        template = angular.element(template.outerHTML);
        var linkTemplate = $compile(template);
        var domElement = linkTemplate(scope);
        element.replaceWith(domElement);
    }

    var directive = {
        restrict: 'E',
        scope: { 
            meta: '=',
            storage: '=ngModel',
            key: '=',
        },
        link: linkFn
    };

    return directive;
  });

// directive
scope: {
        meta: '=',
        storage: '=ngModel',
        key: '=',
        userForm: '='
}

// template
<poly-field user-form="userForm" ng-model="storage" meta="meta" key="username" name="username" ng-minlength="3" ng-maxlength="8"></poly-field>