4

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

  1. 如果字段是名称并且类型是文本，指令将返回一个输入 html 控件，
  2. 如果该字段是一个列表，那么它将返回一个选择框，依此类推

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

我提出了一个简单的 plunkr 来说明这个问题 - http://plnkr.co/edit/R3NTJK?p=preview

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

从过去的 2 天开始，我一直在努力控制这一点，这真的让我发疯了。

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

如果有人能帮助我解决这个问题，我将不胜感激。

4

1 回答 1

2

更新：使用以下链接功能：

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);
}

笨蛋。

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

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">'
于 2013-03-15T16:09:06.863 回答