Question

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

我也尝试在此{{ name }}中添加div，但在页面上直接添加名称属性时也不会打印名称属性，确实有效。这给了我一个结论，即新添加的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属性中缺少"，需要关闭</div>代码......

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

来自angular指令的新添加元素未被编译

1 个答案: