16

我有一个包含 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 的内容以将其用作 Angular 应用程序。关于如何让它解析动态内容的任何想法？

4

3 回答 3

26

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

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

于 2012-07-03T20:43:20.057 回答
6

查看 angularjs 中的$routes和 ngView。

这是一个非常基本的示例：

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

于 2012-07-21T14:11:42.123 回答
4

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

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

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

于 2014-02-04T00:49:03.207 回答