Init angular app in jQuery's ajax success callback

Question

A jQuery ajax request loads the HTML of an angular app (out of multiple independent angular apps) and injects it in the DOM (simplified code):

$.ajax({
  'url': 'url-to-random-angular-app.html',
  'success': function(data) {
    var content = $(data).find('[data-id]');
    //var content = '<div data-id="5"><div ng-app="MyRandomApp" ng-controller="MyRandomAppController">[...]</div></div>';
    //angular.???.$compile(content);
    $('#container').html(content);
  }
});

My problem is, that the angular app is not working, because it's not initialized somewhere. How can I init the angular app in the jQuery success callback?

schellmax · Accepted Answer · 2016-01-18 14:41:09Z

3

you can initialize your angular app at any given time using:

angular.bootstrap(document, ['MyRandomApp']);

also see https://docs.angularjs.org/guide/bootstrap#manual-initialization

answered Jan 18, 2016 at 14:41

schellmax

6,1634 gold badges43 silver badges54 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Angular.js automatically bootstraps on the DOMContentLoaded event. This event will only be called once, so Angular won't automatically initialise after you put the ajax-loaded html into your DOM.

The official Angular documentation shows this way of manually invoking the bootstrap of your Angular app:

angular.bootstrap(document, ['myApp']);

Please note that the myApp value is of importance here.

Sidenote

I don't know how complex your project is, but you could probably replace your Uber-jQuery site by combining all your Angular-apps into one. Use ngRoute or ui-router to load different pages.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 18, 2016 at 14:44

narrowtux

7037 silver badges25 bronze badges

Collectives™ on Stack Overflow

Init angular app in jQuery's ajax success callback

2 Answers 2

Comments

Sidenote

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Sidenote

Comments

Your Answer

Sign up or log in

Post as a guest

Related