Question

我在html文件中声明了一个表单。输入是动态生成的。

这意味着，它们在javascript中构建为字符串，然后在angular中以自定义指令编译。

app.directive('customInput', function($compile){
return{
  restrict: 'E',
  scope: true,
  link: function(scope, element, attrs){
    var html = "<input type='text' ng-model='tCtrl.test[$index]' ng-required='required' ng-maxlength='3'/>";
    var el = $compile(html)(scope);
    element.html("");
    element.append(el);
  }
}
});

他们使用我的角度代码可以正常工作，但问题是：它们不会被“识别”为我的表单的一部分。这意味着，当输入被修改时，父FORM元素不会改变它的$ pristine，$ error等状态。

如何将已编译的输入视为表单的一部分？

这个plunkr就是我遇到的问题的一个例子：

http://plnkr.co/edit/tR7loK45wXEFcBIsDeur?p=preview

Answer 1

你正在做的是在编译之后将元素放在dom上，因此ngmodel没有机会将自己连接到父表单。

你正在做的是：

1. create & compile element
2. place it in dom

因为元素在进入dom之前已经被编译了..它永远不会知道它的父形式，因此不会将自己链接到父元素。

步骤的顺序应该是：

1. create an element, 
2. place it in dom 
3. compile it. // now it will have a chance to hook up to the parent

所以你应该做的是：

   var el =angular.element('your html');
   element.append(el);
   $compile(el)(scope);

AngularJS - 如何在表单内编译输入？

1 个答案: