javascript - 在 Angular 引导之后向 DOM 添加指令

Question

我正在尝试在 Angular 引导后向 DOM 添加一些指令。如果我在运行 block 中执行此操作，它会完美工作，但是如果我添加延迟，则不会显示指令。 看看我的 fiddle ，这样你就明白我的意思了:https://jsfiddle.net/wLddmctp/

var app = angular.module("myApp", ["docsSimpleDirective"]);

app.run(function ($timeout) {

    $timeout(function () {
        var container = document.getElementById("container");
        var box = document.createElement("div");
        box.innerHTML = "<div my-customer></div>";
        container.appendChild(box);
    }, 3000);
});

谁能解释一下这是什么原因，以及如何解决这个问题？

谢谢

Answer 1

你需要手动编译新的 HTML，因为如果你在超时时使用它，Angular 已经完成了解析和渲染。

因此您需要使用具有正确范围的 $compile 服务。

var scope = angular.element(container).scope();
$compile(box)(scope);

演示: https://jsfiddle.net/wLddmctp/1/

话虽这么说，您可以看到，使用 $compile 时，代码变得有点笨拙，尤其是获得正确的元素范围。我建议使用自定义服务/指令来动态注入(inject) HTML，运行 block 不是执行此操作的理想位置。