从角指令新添加的元素没有得到编译 [英] Newly added elements from angular directive not getting compiled

问题描述

我包我的输入标记的一些 DIV 标签按要求。现在的问题是，类 DIV 标签动态地角发生变化，但看来这新加入 DIV 是没有得到编译正因为如此，它显示在页面上（在浏览器中查看源代码看到）正是我添加它。没有变化正在发生，如果我直接添加页面，而不是从指令上通常一样。

I wrapped my input tag with some div tags as per the requirement. Now the issue is, class of div tag is changing dynamically by angular, but seems this newly added div is not getting compiled and because of that, it is shown on the page (saw in view source in browser) exactly as I add it. No change is happening which it usually does if I add it directly on page instead of from directive.

我尝试添加 {{名称}} 也是在这个 DIV ，但它也不能打印的名字物业而直接页面上添加它，确实工作。这给了我新添加的结束 DIV 是没有得到正确的编译。

I tried adding {{ name }} also in this div but it also doesn't print the name property while adding it directly on page, does work. This gave me the conclusion that the newly added div is not getting compiled properly.

我是从HTML调用这个样子，

I'm calling from html like this,

<!-- 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我的code是，

My code in js is,

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

它是当我不使用换工作（）函数如下：

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

这是工作的罚款，但现在我的要求是不同的，我已经来包装现有的输入标记，以便必须使用包裹（）功能。

This was working fine but now my requirement is different and I have to wrap the existing input tag so have to use the wrap() function.

我曾尝试 $编译（元）（范围）和 $编译（element.html（））（范围）但他们没有正常工作。有什么办法来编译新添加的成分？

I have tried $compile(element)(scope) and $compile(element.html())(scope) but none of them work as well. Is there any way to compile the newly added components?

推荐答案

在调用后 .wrap（），元素仍是原来的DOM元素，这还不包括DIV，它被包裹在一个引用。所以，当你编译元素，包装的DIV未编译。

After calling .wrap(), element is still a reference to the original DOM element, which doesn't include div that it is wrapped in. So when you compile element, the wrapped div is not compiled.

假设 FDIV 是一个简单的div，你可以尝试使用 .parent（）将其包括在编译...

Assuming fDiv is a simple div, you can try using .parent() to include it in the compilation...

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

编辑...

FDIV似乎缺少■在NG-class属性，需要一个结束＆LT; / DIV＆GT; 标签...

fDiv appears to be missing "s in the ng-class attribute and needs a closing </div> tag...

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

这篇关于从角指令新添加的元素没有得到编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！