dynamic - 在页面内动态加载 AngularJS 模板

Question

我有一个包含 2 个 Controller 的页面:一个管理所谓的“应用程序”列表，另一个是将新的 Angular 模板放入其 Div 元素的 innerHTML 中。

<div ng-controller="appList"></div>
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>

我尝试使用标准的 {{expression}} 绑定(bind)，但它们不适用于 html，我还尝试了 ng-bind-html-unsafe 指令(将 innerhtml 绑定(bind)到 App 请求返回的指令)但 Controller 不是在这个新代码中执行。

问题似乎是通过使用绑定(bind)，Angular 不会重新解析相关 html 的内容以将其用作 Angular 应用程序。关于如何让它解析动态内容的任何想法？

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.

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