在Angular Bootstrap之后向DOM添加指令

Question

I´m trying to add some directives to the DOM after Angular has bootstrapped. If I do this in the run block it perfectly works, however if I add a delay the directive is not shown. Check out my Fiddle so you can see what i mean: 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);
});

Can someone explain whats the reason for this, and how to solve this problem?

Thanks

Answer 1

You will need to compile new HTML manually, because if you use it in timeout Angular has already finished parsing and rendering.

So you need to use $compile service with correct scope.

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

Demo: https://jsfiddle.net/wLddmctp/1/

That being said, you can see that code becomes a little clumsy with such usage of $compile and especially getting proper element scope. I would recommend to use custom service/directive for dynamic injection of HTML, run block is not ideal place for this.