AngularJS doesnt "bootstrap" new DOM elements

Question

I have an AngularJS app which (reduced to relevant parts) looks like this:

<div ng-app="myModule">
    <div id='container'>
        <div say-hello-to name="Frank">f</div>
        <div say-hello-to name="Billy">b</div>
    </div>
</div>

the application works fine. Now, if after the angular bootstrapping process, I add a new dom element, which corresponds to a directive, it isn't interpreted. Note that the "Addition" is done by non-angularjs JavaScript Code.

<div say-hello-to name="Dusty">d</div>

it is just "dead" div.

JsFiddle Link: http://jsfiddle.net/Nn34X/

The question is: How can I add a new DOM Element into the application and let AngularJS know that there is a new Element to be interpreted (I could easily point angularjs exactly to all inserted elements)

Cheers, and thanks in Advance!

if you are adding the element with jQuery you need to compile it first — doodeec, Apr 16 '14 at 10:17
@iPirat have a look at https://groups.google.com/forum/#!topic/angular/Ul3XTt6NCfY — doodeec, Apr 16 '14 at 10:43

score 5 · Accepted Answer · edited May 23 '17 at 12:09

5

Retrieve the $injector service:

var $injector = angular.element(document.querySelector('#container')).injector();

Select the element:

var element = angular.element(document.querySelector('[name="Dusty"]'));

Use the $injector service to retrieve the $compile service and link the element to the scope:

$injector.invoke(function ($compile) {    
  var scope = element.scope();
  $compile(element)(scope);
});

Demo: http://jsfiddle.net/6n7xk/

Short explanation: Call Angular JS from legacy code

edited May 23 '17 at 12:09

Community

1
1

answered Apr 16 '14 at 11:15

tasseKATT

38,470
8
84
65

As a follow-up: if REMOVING such an element using non-angular code, is it enough to do `angular.element(...).scope().$destroy()` or is there anything else to consider? – iPirat Apr 16 '14 at 12:54

AngularJS doesnt "bootstrap" new DOM elements

1 Answers1