在页面内动态加载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绑定到App请求的返回值），但是控制器不支持在此新代码中执行。

问题似乎在于，通过使用绑定，Angular不会重新解析所讨论的html的内容以将其用作有角度的应用程序。关于如何获取它来解析动态内容的任何想法？

Answer 1

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

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

MySubCtrl每次您进入时都会被激活/mystate/something，您可以使用该“东西”作为参数（请参阅参考资料$stateParams）。您可以将状态嵌套到任意数量的级别。