Question

我一直在尝试构建一个表单输入指令，它将根据模型和模型属性生成表单输入。例如，

如果字段是name且type是text，则该指令将返回一个输入html控件
如果该字段是列表，则它将返回一个选择框等等。

这些输入是在视图中使用ng-repeat生成的。输入绑定到范围中的模型。这工作正常。但是，表单验证失败;即如果输入控件无效，则主窗体仍然显示该窗体有效。

我已经设置了一个简单的插件来说明问题 - http://plnkr.co/edit/R3NTJK?p=preview

注意：我实际上嵌套了表单，因为输入名称字段也是从作用域模型动态生成的。

过去两天我一直试图抓住这个，这真的让我疯狂。

我不确定我是否遗漏了什么。

如果有人帮我解决这个问题，我真的很感激。

Answer 1

<强>更新：使用以下链接功能：

link: function linkFn(scope,elem,attr){
   var jqLiteWrappedElement = 
       angular.element('<input type="url" name="socialUrl" ng-model="social.url">');
   elem.replaceWith(jqLiteWrappedElement);
   $compile(jqLiteWrappedElement)(scope);
}

Plunker

由于我不明白的原因，必须在调用$ compile之前执行replaceWith()。如果有人能解释为什么会这样，我们会很感激！

Update2：在下面的评论中，Artem提到在调用链接函数之前必须修改DOM，所以这也有效：

var myElem = angular.element('some html');
var linkFn = $compile(myElem);
element.replaceWith(myElem);
linkFn(scope);

原始答案：

而不是链接功能，只需在指令中使用模板：

template: '<input type="url" name="socialUrl" ng-model="social.url">'

Angular - 使用表单输入指令时的表单验证问题

1 个答案: