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

【问题标题】：How to load angularjs "ng-app" dynamically using javascript?如何使用javascript动态加载angularjs“ng-app”？
【发布时间】：2019-07-13 12:52:42
【问题描述】：

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

文件 home.html，包括 angularjs.min.js 文件。此页面有一个按钮“loadUsers”。在容器（“#userContainer”）相同页面中加载“userList.html”文件的按钮的单击处理程序。

userList.html 示例内容如下，

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

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

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

【问题讨论】：

缺少ng-app 的值以匹配您的主应用模块名称。此外，如果您在页面加载后加载（例如使用 ajax），则需要手动引导 Angular 应用程序。 minimal reproducible example 会有所帮助。你对这一切的解释不是很详细或清楚
感谢@charlietfl 的回复，我试过angular.bootstrap(document, ['myNgApp']); 工作正常。

标签： javascript jquery html angularjs

【解决方案1】：

AngularJS 框架在 DOM 中扫描 DOMContentLoaded 处的 ng-app 指令。如果稍后添加指令（比如在.ajax 调用之后），则忽略该指令。

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

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

有关详细信息，请参阅

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

有关详细信息，请参阅 - AngularJS angular.element Function API Reference.

【讨论】：

【解决方案2】：

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

我认为您可以将 ng-app 移动到 body 或 html 标记。加载内容时，使用 $compile 服务将 $scope 附加到您的视图中。（角度 1.7）

【讨论】：

3 年前，我用 jQuery 创建了 javascript 引擎来渲染屏幕、绑定设备特定事件、弹出窗口、自定义警报、ajax 请求等，用于单页应用程序。所有的屏幕都在 javascript design batten 实现 MVC 中实现。现在我正在尝试在引擎中包含一个角度应用程序。
如果做得好，AngularJS 和 jQuery 可以共存。事实上，如果 jQuery 库在 AngularJS 库之前加载，AngularJS 框架将在内部使用 jQuery。有关详细信息，请参阅AngularJS angular.element API Reference。