动态地在页面内加载AngularJS模板

Question

我有一个包含2个控制器的页面:一个管理所谓的'apps'列表,另一个用于将新的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的内容,以将其用作角度应用程序.有关如何解析动态内容的任何想法？

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.

我希望这可以帮助任何遇到我问题的人.

Answer 2

查看angularjs中的$ routes和ngView.

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

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

Answer 3

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

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

MySubCtrl每当您访问时就会被激活/mystate/something，并且您可以使用该“某物”作为参数（请参阅 参考资料$stateParams）。您可以将状态嵌套到任意数量的级别。