Question

我尝试用angular中的指令做一些事情，但我在编程html元素中遇到了$ compile函数的一些问题，在这里调用＆＃34; phe＆＃34;。

    var phe = angular.element('<div style="background-color:orange">{{value}}</div>');

当我追加＆＃34; phe＆＃34;在指令元素之后或之前，它就像一个魅力......

    var $phe = $compile(phe)(scope);    
    element.after($phe);

但如果我用这个＆＃34; phe＆＃34;包装了指令元素。 $ compile不起作用。

    element.wrap($phe);

有人有点想法吗？

我做了一个http://plnkr.co/edit/0x2MmQ7WYmiNog0IEzTj?p=preview

Answer 1

如果您更改编译序列，它将起作用...在将元素放入dom之前编译元素

        var phe_b = angular.element('<div style="background-color:orange"> b {{value}}</div>');
        var $phe_b = $compile(phe_b)(scope);
        element.before($phe_b);

在...之后做同样的事情。

Answer 2

它不能与wrap一起使用的原因是因为wrap克隆了DOM元素。换句话说，如果你这样做了：

var wrapper = angular.element("<div>");
element.wrap(wrapper);

console.log(wrapper[0] !== element[0].parentNode); // this would output "true"

因此，您编译/链接的元素与DOM中的元素不同。

当然，您可以获取包装元素（它是wrap的返回值）和$compile它，但是您需要注意不要重新编译/重新编译 - 链接应用于当前element（包括完全相同的指令）及其子代的某些指令。

angularjs指令中的$ compile内部链接函数不能按预期工作

2 个答案: