Angular.js加载，处理和显示通过REST $资源获得的动态模板

Question

我有一个Angular应用程序，需要支持可自定义的报告。我的目的是允许用户选择许多可用报告中的一个，并使后端REST api提供模板和数据作为JSON（最终用户可以自定义模板）。

然后，应用程序会以某种方式将模板插入＆＃34;报告＆＃34;查看页面然后将数据放在范围内，Angular应该编译并显示报告/模板。

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

我试过编写一个指令，尝试在页面上调用一个方法（getTemplate（）），该方法将加载已经从范围中提取的模板，但是我的指令显然无法访问范围

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

Answer 1

  

我试过写一个指令，试图在页面上调用一个方法   （getTemplate（））将加载已经从中获取的模板   但是我的指令无法访问范围   显然。

是的，你是对的，但是有一种方法可以将数据从范围传递到指令。假设您想要将范围内的var“x”传递给指令 使用这个

<directive directiveVar='x'/>

inside指令，你需要使用隔离范围

 "scope": {
                    "directiveVar": "="
                },

此变量仅在控制器和postlink函数中可用，因此您的指令模板必须像这样

<ng-bind-html="directiveVar"/>

在postlink中，您可能需要使用此代码段

$scope.directiveVar =$sce.trustAsHtml($scope.directiveVar)

参考

1. http://docs.angularjs.org/api/ng.directive:ngBindHtml
2. http://docs.angularjs.org/api/ng。$编译

Answer 2

您可以将动态模板编译为控制器中DOM上的元素，然后在控制器中编译如下：

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

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

我会使用带有单个DIV容器的模板设置您的路径（您可以使用HTMLToJS在线工具或grunt任务在一个JavaScript文件中提取所有静态容器模板）：

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