在页面内动态加载AngularJS模板

我有一个包含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请求的返回值),但控制器不是在这个新的代码中执行。

问题似乎是通过使用Binding,Angular不会重新解析所讨论的HTML的内容,将其用作角度应用程序。有什么想法来解析动态内容?

看看uiRouter模块(从AngularUI项目)。它增加了状态的概念,它们与路线非常相似,但与其他好处相似,例如嵌套它们的能力。例如:

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

当您进入/ mystate /某事时,MySubCtrl将被激活,您可以使用该“某事”作为参数(参见$stateParams)。你可以将状态嵌套到任何级别。

翻译自:https://stackoverflow.com/questions/11318337/load-angularjs-template-within-page-dynamically

转载注明原文:在页面内动态加载AngularJS模板