Search code examples
angularjsjquery-load

Angular binding for dynamically added html div

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?

Solution

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

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