Angular binding for dynamically added html div

Question

Sorry, this seems a duplicated questions, but I tried all answered questions close to my question, with no success.

I am trying to introduce angular.js into a legacy system. the system is using the .load jquery function to dynamically load div content with a page from an ASP.NET MVC page.

my brief html will look like this

<body ng-app="myApp">
<div ng-controller="myCtrl">
any content...
<div id="dyncontent"> </div>
</div>

and my javascript legacy code looks like

$('#dyncontent').load('/showviewcontent');

I added in the dynamic content, some angular directive and binding instruction

my angular code is like this

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function ($scope) {
.....
});

How to make the binding / angular directive works on the newly added content?

Vadim · Accepted Answer · 2014-08-25 15:47:56Z

1

You need to manually start the angular module using angular.bootstrap

$('#dyncontent').load('/showviewcontent', function() {
  angular.bootstrap(document.getElementById('dyncontent'), ['myApp']);
});

answered Aug 25, 2014 at 15:47

Vadim

18k5 gold badges40 silver badges62 bronze badges

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

3 Comments

Ghassan Karwchan Over a year ago

Thanks a lot. it worked. I was looking for answers, and I found answers to call $scope.$apply, and $compile, and none of them worked. More happy to see a Calgarian helped me with this

Ghassan Karwchan Over a year ago

Sorry, In case I empty that div, and reload it again, how can I re-bootstrap again. I can bootstrap only once, and I didn't find any way to destroy the application

Vadim Over a year ago

@gkar You would probably have to remove the dom element that you bound the application to and re-create it.

Collectives™ on Stack Overflow

Angular binding for dynamically added html div

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related