在页面中动态加载AngularJS模板

Question

我有一个页面包含 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绑定到应用程序请求的返回值），但控制器不会在这段新代码中执行。

问题似乎是使用绑定后，Angular没有重新解析相关html内容以将其用作Angular应用程序。有什么方法可以使其解析动态内容吗？

- Zoey

---

这些“应用程序”是不同的Angular应用程序（每个都有一个ng-app声明）还是同一应用程序的不同控制器/视图？如果只是不同的控制器/视图，我会使用appList作为导航，并设置$routeProviders（http://docs.angularjs.org/api/ng.$routeProvider）来管理不同的视图。 - Noah Freitas

可能比我尝试的那个更好的解决方案，但我还是新手Angular，所以我会尝试一下。谢谢。 - Zoey

Answer 1

似乎$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.

这应该能帮助到任何遇到我问题的人，希望如此。

- Zoey

---

如果你没有显式加载JQuery，你可以直接使用 var appPane = document.getElementById 和 appPane.innerHTML = data) 然后 $compile(containerElement)($scope) - Sam Barnum

Answer 2

请查看angularjs中的$routes和ngView。这是一个非常基本的例子：

以下是一个非常基本的示例：

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

- bearfriend

---

这是“官方”的替代方案，但目前无法在需要控制器分层结构的情况下工作，就像我的原始问题一样。 - Zoey

Answer 3

看一下uiRouter模块（来自AngularUI项目）。它添加了状态的概念，这些状态与路由非常相似，但还有其他好处，例如能够嵌套它们。例如：

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

MySubCtrl将在您访问/mystate/something时被激活，您可以使用"something"作为参数（请参见$stateParams）。您可以嵌套状态到任意级别。

- Alejandro García Iglesias

---

听起来非常有用！由于我的答案是在Angular早期开发阶段给出的，所以这个功能还不存在。如果其他人认为不是这样，请随时发表评论，但我认为现在这是正确的答案。已接受。 - Zoey

我很高兴这些事情（AngularJS生态系统）正在以这样的方式发展。 - Alejandro García Iglesias

值得一提的是，我已经在自己的项目中尝试了这个解决方案，它非常有用。存在一些问题，比如导航到不存在的路由会导致错误，但我打赌在他们的中等深度文档中隐藏着一种检测路由不存在的方法，以便可以处理它。作为一般情况下的场景，我建议任何试图使用路由的人都使用这个解决方案，并建议跳过 Angular 的官方路由提供程序，因为这个更加强大。 - Zoey