角度指令中新添加的元素未编译

Question

我根据要求用一些div 标签包裹了我的input 标签。现在的问题是，div 标签的类正在按角度动态变化，但似乎这个新添加的div 没有被编译，因此，它显示在页面上（在浏览器中查看源代码）完全一样我添加它。如果我直接在页面上而不是从指令中添加它，通常不会发生任何变化。

我尝试在此div 中添加{{ name }}，但它也不会在直接在页面上添加名称属性时打印它，确实有效。这让我得出结论，新添加的div 没有正确编译。

我是这样从 html 调用的，

<!-- ag-textbox is my directive -->
<input ag-textbox ag-grid-class="col-md-4" class="form-control" id="age" type="text"  ag-name="Age" ng-model="age" ag-formname="newform" required />

我在js中的代码是，

var fDiv = angular.element("<div class='" + agGridClass + "' "
                            + "ng-class={'has-error':" + agFormName + "." + agName + ".$invalid}>");
element.wrap(fDiv);
$compile(element.contents())(scope);

当我不使用wrap() 函数时它正在工作，如下所示：

element.html('').append(firstDiv + inputText + otherDiv);
$compile(element.contents())(scope);

这工作正常，但现在我的要求不同了，我必须包装现有的 input 标签，所以必须使用 wrap() 函数。

我尝试过$compile(element)(scope) 和$compile(element.html())(scope)，但它们都不能正常工作。有没有办法编译新添加的组件？

Answer 1

在调用.wrap()之后，element仍然是对原始DOM元素的引用，它不包括它被包裹的div。所以当你编译element时，被包裹的div没有被编译。

假设fDiv是一个简单的div，你可以尝试使用.parent()将其包含在编译中...

element.wrap(fDiv);
$compile(element.parent().contents())(scope);

编辑...

fDiv 似乎在 ng-class 属性中缺少 "s，需要关闭 </div> 标记...

var fDiv = angular.element("<div class='" + agGridClass + "' "
               + "ng-class=\"{'has-error':" + agFormName + "." + agName + ".$invalid}\"></div>");