在页面中动态加载AngularJS模板
在页面中动态加载AngularJS模板
提问于 2012-07-04 04:03:44
我有一个包含两个控制器的页面:一个是管理所谓的‘app’列表，另一个是将新的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请求返回的innerhtml)，但是控制器不会在这个新代码中执行。
问题似乎是，通过使用绑定，Angular不会重新解析有问题的html的内容，将其用作angular应用程序。关于如何让它解析动态内容有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-02-04 08:49:03
看看(来自AngularUI项目的) uiRouter模块。它添加了状态的概念，这与路由非常相似，但具有其他好处，例如嵌套它们的能力。例如：
$stateProvider
.state('myState', {
url: '/mystate',
templateUrl: '...',
controller: 'MyCtrl'
})
.state('myState.substate', {
url: '/{substate}',
templateUrl: '...',
controller: 'MySubCtrl'
});每当你转到/mystate/something时，MySubCtrl就会被激活，你可以使用这个"something“作为参数(参见$stateParams)。您可以将状态嵌套到任意数量的级别。
Stack Overflow用户
发布于 2012-07-04 04:43:20
看起来，当$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.我希望这能帮助任何遇到我的问题的人。
Stack Overflow用户
发布于 2012-07-21 22:11:42
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11318337
复制相关文章
相似问题