如何使用javascript动态加载angularjs“ng-app”？

Question

I created an web application in javascript and jQuery. Rendered dynamic html page using jQuery .load() method.

File home.html, included angularjs.min.js file. This page having one button "loadUsers". On click handler of the button loading "userList.html" file in a container ("#userContainer") same page.

The userList.html sample content is like below,

<div ng-app>
Enter Your Name: <input type="text" ng-model="txtName" /> <br />
Hello {{txtName}}

On input, the value is not binding with model. Angular is not applied for dynamically loaded template.

Any one guide me how to achieve this?

Answer 1

The AngularJS framework scans the DOM for the ng-app directive at DOMContentLoaded . If the directive is added later (say after an .ajax call), the directive is ignored.

Any apps added to the DOM after DOMContentLoaded need to be manually bootstrapped:

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

For more information, see

• AngularJS Developer Guide - Bootstrap
• AngularJS angular.bootstrap Function API Reference

---

AngularJS and jQuery can live together if done wisely. In fact the AngularJS framework will use jQuery internally if the jQuery library is loaded before the AngularJS library.

For more information, see - AngularJS angular.element Function API Reference .

Answer 2

The main question is: Why do you need to use jquery and angular together?!

I think you can move the ng-app to body or html tag. When the content is loaded use $compile service to append $scope to your view. (angular 1.7)