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

Question

我用javascript和jQuery创建了一个Web应用程序。使用 jQuery .load() 方法呈现动态 html 页面。

文件主页.html，包括angularjs.min.js文件。此页面有一个按钮"加载用户"。单击按钮的处理程序，将"userList.html"文件加载到容器("#userContainer"(同一页面中。

用户列表.html示例内容如下所示，

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

在输入时，该值不与模型绑定。角度不适用于动态加载的模板。

有人指导我如何实现这一目标吗？

Answer 1

AngularJS框架在DOMContentLoaded扫描DOM以查找ng-app指令。如果稍后添加指令(例如在.ajax调用之后(，则会忽略该指令。

DOMContentLoaded后添加到 DOM 的任何应用程序都需要手动引导：

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

有关详细信息，请参阅

• AngularJS 开发人员指南 - 引导程序
• AngularJS angular.bootstrap Function API 参考

---

如果做得明智，AngularJS和jQuery可以共存。事实上，如果jQuery库在AngularJS库之前加载，AngularJS框架将在内部使用jQuery。

有关详细信息，请参阅- AngularJS angular.element函数 API 参考。

Answer 2

主要问题是：为什么需要同时使用 jquery 和 angular？！

我认为您可以将 ng-app 移动到正文或 html 标签。加载内容时$compile使用服务将$scope追加到视图中。(角度 1.7(