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）。您可以将状态嵌套到任意数量的级别。

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

3 个答案: