在页面内动态加载 AngularJS 模板答案

【问题标题】：Load AngularJS Template within page, dynamically在页面内动态加载 AngularJS 模板
【发布时间】：2012-07-04 07:45:27
【问题描述】：

我有一个包含 2 个控制器的页面：一个管理所谓的“应用程序”列表，另一个是将新的 Angular 模板放入其 Div 元素的 innerHTML 中。

<div ng-controller="appList"></div>
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>

我尝试过使用标准的 {{expression}} 绑定，但它们不适用于 html，我也尝试过 ng-bind-html-unsafe 指令（将 innerhtml 绑定到 App 请求返回的指令）但是控制器不在此新代码中执行。

问题似乎在于，通过使用绑定，Angular 不会重新解析相关 html 的内容以将其用作 Angular 应用程序。关于如何让它解析动态内容的任何想法？

【问题讨论】：

“应用程序”是不同的 Angular 应用程序（每个都有 ng-app 声明？）还是同一应用程序的不同控制器/视图？如果只有不同的控制器/视图，我会使用 appList 作为导航并设置 $routeProviders (docs.angularjs.org/api/ng.$routeProvider) 来管理不同的视图。
可能比我尝试的解决方案更好，但我还是 Angular 的新手，所以我会尝试一下。谢谢。

标签： dynamic dom-manipulation angularjs

【解决方案1】：

看看uiRouter 模块（来自AngularUI 项目）。它添加了状态的概念，这与路由非常相似，但具有其他优点，例如嵌套它们的能力。例如：

$stateProvider
    .state('myState', {
        url: '/mystate',
        templateUrl: '...',
        controller: 'MyCtrl'
    })
    .state('myState.substate', {
        url: '/{substate}',
        templateUrl: '...',
        controller: 'MySubCtrl'
    });

MySubCtrl 将在您转到/mystate/something 时被激活，您可以使用该“某物”作为参数（请参阅$stateParams）。您可以将状态嵌套到任意数量的级别。

【讨论】：

听起来真的很有用！因为我的答案来自 Angular 的早期开发，所以这并不存在——如果不是这种情况，其他人可以随意发表评论，但我觉得现在这是正确的答案。接受。
我很高兴这些东西（AngularJS 生态系统）正在以它们的方式发展。
作为记录，我已经在自己的项目中尝试过这个解决方案，它非常有用。有一些问题，例如导航到不存在的路线会导致错误，但我敢打赌，隐藏在他们中等深度的文档中是一种检测路线何时不存在以便可以处理的方法。作为一般情况，我向任何尝试使用路由的人推荐此解决方案，并且我建议跳过 Angular 的官方 Route 提供程序，因为它的功能要强大得多。

【解决方案2】：

在 angularjs 中查看$routes 和 ngView。

这是一个非常基本的例子：

http://jsfiddle.net/pXpja/3/

【讨论】：

这是“官方”替代方案，但目前在我原来的问题中需要控制器分层结构的情况下不起作用。

【解决方案3】：

似乎 $compile 服务在提供您希望与当前范围一起重新编译的元素时，可以满足我的要求。

来自我的来源的示例：

var appPane = $('#AppPane');//JQuery request for the app pane element.
appPane.html(data);//The dynamically loaded data
$compile(appPane.contents())($scope);//Tells Angular to recompile the contents of the app pane.

希望对遇到我问题的人有所帮助。

【讨论】：

如果您没有显式加载 JQuery，您可以只使用 var appPane = document.getElementById 和 appPane.innerHTML = data) 和 $compile(containerElement)($scope)