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

Newly added elements from angular directive not getting compiled

本文关键字：添加 元素 新添加 编译 angular 指令      更新时间：2023-09-26

我根据要求用一些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)，但它们都不起作用。有什么方法可以编译新添加的组件吗？

调用.wrap()后，element仍然是对原始DOM元素的引用，其中不包括它所封装的div。因此，当您编译element时，封装的div不会被编译。

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

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

编辑。。。

fDiv在ng类属性中似乎缺少"s，需要一个关闭的</div>标记。。。

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