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
– doodeec, Commented Apr 16, 2014 at 10:17
@iPirat have a look at groups.google.com/forum/#!topic/angular/Ul3XTt6NCfY — doodeec
– doodeec, Commented Apr 16, 2014 at 10:43

Community · Accepted Answer · 2017-05-23 12:09:14Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered Apr 16, 2014 at 11:15

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iPirat Over a year ago

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?

Collectives™ on Stack Overflow

AngularJS doesnt "bootstrap" new DOM elements

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related