How to load angularjs "ng-app" dynamically using javascript?

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?

missing value for ng-app to match your main app module name. Also if you are loading that after page load (using ajax for example) you would need to manually bootstrap the angular app. A minimal reproducible example would help. Your explanation of all this is not very descriptive or clear — charlietfl
– charlietfl, Commented Jul 13, 2019 at 12:54
Thanks for your reply @charlietfl,I tried angular.bootstrap(document, ['myNgApp']); it was working fine. — sureshunivers
– sureshunivers, Commented Jul 13, 2019 at 13:01

georgeawg · Accepted Answer · 2019-07-13 14:39:36Z

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 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.

user8323776 · Accepted Answer · 2019-07-13 13:05:50Z

0

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)

answered Jul 13, 2019 at 13:05

user8323776

162 bronze badges

2 Comments

sureshunivers Over a year ago

3 years back I created javascript engine with jQuery to render screen, bind device specific events, popup, custom alert, ajax request, ect for single page application. All the screen implemented in javascript design batten achieving MVC. Now am trying to include an angular app in side the engine.

georgeawg Over a year ago

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 API Reference.

Collectives™ on Stack Overflow

How to load angularjs "ng-app" dynamically using javascript?

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related