Geek Answers Handbook

Use Angular only on a page loaded through ajax

<html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> </head> <body> <div id="ajax-content-here"> </div> </body> </html>

I am really new to angular, so please be careful!

So the idea is as indicated in the header above. I load my page using the angular library included in the chapter section. Later I load the data (below) into a div container using ajax (jquery).

 <div id="angular-test"> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </div>

I would like to somehow initialize angular to only be active inside the #angular-test container after the ajax request has completed. I assume this has something to do with the scope object?

Thanks!

+8
jquery angularjs angularjs-scope
source share
2 answers

Angular performs initialization (which includes searching for ng-app and compiling the template) after the DOM load completes (in the DOMContentLoaded event). Angular has no way of knowing that the DOM is changed and the ng application is added to the DOM later after receiving an AJAX response.

So, you can try to initialize loading manually after the DOM is really finalized (i.e. in your jquery ajax callback after assigning innerHTML). In the callback do the following:

  angular.bootstrap($('#ajax-content-here'));

Assuming the content inside ajax-content-here related to some ng-app . Take a look at the manual initialization section http://docs.angularjs.org/guide/bootstrap

+9
source share
 <div ng-app id="angular-test">

The ng-app initializes angular inside angular-test .

0
source share

More articles:


All Articles