javascript - Angular.js 加载、处理并显示通过 REST $resource 获取的动态模板

Question

我有一个 Angular 应用程序需要支持可自定义的报告。我的目的是允许用户选择众多可用报告之一，并让后端 REST API 提供模板和 JSON 数据(最终用户可以自定义模板)。

然后，应用程序将以某种方式将模板插入到“报告” View 页面中，然后将数据放入范围内，Angular 应该编译并显示报告/模板。

我已经研究过 ng-include 但是它似乎只支持文档的 URL 或路径，但是我已经通过 REST 服务获得了模板文本，并且我不能使用静态 url 或文件路径，这需要通过 REST api，如果 ng-include 直接接受模板文本，可能会起作用，但不会。

我尝试编写一个指令，尝试调用页面上的一个方法 (getTemplate())，该方法将加载已从范围中获取的模板，但我的指令显然无法访问该范围。

我应该使用什么策略来实现这一目标？指令似乎是最好的，但我显然做错了，并且完全迷失在文档和我试图实现这一目标的许多尝试中。

Answer 1

您可以将动态模板编译为 Controller 中 DOM 上的元素，然后在 Controller 中具有如下内容:

var el = angular.element('#myselector');   
el.html(mydynamichtmlfromresource);

$compile(el.contents())($scope);

我将使用具有单个 DIV 容器的模板设置您的路线(您可以使用 HTMLToJS 在线工具或 grunt 任务将所有静态容器模板提取到单个 JavaScript 文件中):

<section class="view">
  <div id="myselector"></div>
</section>