Menu
<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 gentle!
So the idea is as stated above in the title - I load my page with angular library included in head section. Later I load data (below) into the 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 the angular to be active only inside #angular-test container after ajax request is completed. I assume it has something to do with scope object right?
Thanks!
782
Angular does initialization (which includes looking for ng-app and template compilation) once the DOM finishes loading (on DOMContentLoaded event). Angular does not have a way to know that the DOM is changed and an ng-app is added to the DOM later once the AJAX response is received.
So, you can try initializing bootstrap manually after the DOM is really finalized (that is on your jquery ajax callback, after you assign to innerHTML). In the callback do something like the following:
angular.bootstrap($('#ajax-content-here'));
Assuming that the content inside ajax-content-here refers to some ng-app.
Take a look at the manual initialization section at http://docs.angularjs.org/guide/bootstrap
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
