Validation AngularJS自定义输入字段指令验证

我正在编写一个自定义字段指令，它基于“自定义字段”对象动态创建一个

字段（或

或

等）。我只希望指令包含表单字段，而不是任何验证或标签标记。在验证之前，这一切都很顺利

在编译$时，输入字段似乎没有添加到父作用域的表单中。有没有办法手动添加它？我尝试了

FormController.$addControl（）

（），这导致表单开始侦听输入模型上的更改，但表单状态（脏、有效等）仍然没有更新

标记：

<div ng-controller="FieldController">
  <form name="customFieldForm">
    <label class="control-label" for="{{ field.name }}">{{ field.name }}:</label>
    <input-custom-field model="field"></input-custom-field>
    <span class="input-error" ng-show="customFieldForm.field.$error.required">
        Required</span>
  </form>
</div>

指令（节略）：

.directive（'inputCustomField'，['$compile'，函数（$compile）{
var buildInput=函数（字段，ignoreRequired）{
var html=''；
var bindHtml='name=“field”ng model=“field.value”'；
如果（！ignoreRequired&&field.required）{
bindHtml+='必需'；
}
开关（字段类型）{
案例“整数”：
html+=''；
打破
“十进制”一词：
html+=''；
打破
}
返回html；
};
返回{
限制：'E'，
要求：“^form”，
范围：{
字段：“=模型”
},
链接：函数（范围、elm、属性、formController）{
var场模型；
var-replacedEl；
var renderInput=函数（html）{
replacedEl=$compile（html）（范围）；
elm.replaceWith（replacedEl）；
fieldModel=replacedEl.controller（'ngModel'）；
如果（！fieldModel）fieldModel=replacedEl.find（“输入”）.controller（'ngModel'）；
};
if（scope.field&&scope.field.type）{
var html=buildInput（scope.field，attrs.hasOwnProperty（“ignoreRequired”）；
renderInput（html）；
}
}
};
}])

---

另请参见。

问题在于，在指令进入DOM之前运行$compile，因此Angular不知道它嵌套在表单下。请参见我对同一问题的回答：

myApp.controller("FieldController", function ($scope) {
  $scope.field =  {
    name: "Pressure in",
    required: true,
    readOnly: false,
    type: "decimal",
    value: null
  };
})

.directive('inputCustomField', ['$compile', function ($compile) {
  var buildInput = function (field, ignoreRequired) {
    var html = '';
    var bindHtml = 'name="field" ng-model="field.value"';
    if (!ignoreRequired && field.required) {
        bindHtml += ' required';
    }
    switch (field.type) {
        case "integer":
            html += '<input type="number" ' + bindHtml + ' ng-pattern="/^\\d*$/">';
            break;
        case "decimal":
            html += '<input type="number" ' + bindHtml + ' class="no-spinner">';
            break;
    }
    return html;
  };

  return {
    restrict: 'E',
    require: '^form',
    scope: {
        field: "=model"
    },
    link: function (scope, elm, attrs, formController) {
        var fieldModel;
        var replacedEl;
        var renderInput = function (html) {
            replacedEl = $compile(html)(scope);
            elm.replaceWith(replacedEl);
            fieldModel = replacedEl.controller('ngModel');
            if (!fieldModel) fieldModel = replacedEl.find("input").controller('ngModel');
        };

        if (scope.field && scope.field.type) {
            var html = buildInput(scope.field, attrs.hasOwnProperty("ignoreRequired"));
            renderInput(html);
        }
    }
  };
}])