AngularJS - 如何从 $compile 获取处理后的 HTML 输出？答案

【问题标题】：AngularJS - How to get processed HTML output from $compile?AngularJS - 如何从 $compile 获取处理后的 HTML 输出？
【发布时间】：2017-04-06 13:31:08
【问题描述】：

我有以下函数，它获取自定义 HTML 模板并将一些值传递到范围以生成“报告表”。因为模板对用户不可见，但处理后的输出直接发送到另一个函数，我使用了 $compile 函数。

似乎传递到 $scope 的值已正确处理，但我无法获得纯 HTML 结果。

我尝试过这样做：

var templateUrl = $sce.getTrustedResourceUrl('report.html');

          $templateRequest(templateUrl).then(function(template) {
            $scope.rows = reportData;
            var compTest = $compile(template)($scope);
            console.log(compTest); //IT RETURNS A LOT OF VALUES BUT NOT HTML OUPUT OF THE PROCESSED TEMPLATE
          }, function() {
            // An error has occurred
          });

非常感谢您的建议。

结果如下：

HTML 内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Report</title>
</head>
<body>
<table>
  <thead>
  <td>
    &nbsp;
  </td>
  <td>
    Breakfast
  </td>
  <td>
    Lunch
  </td>
  <td>
    Dinner
  </td>
  <td>
    Snack
  </td>
  </thead>
  <tbody>
  <tr ng-repeat="row in rows">
    <td>TEST</td>
    <td>40</td>
    <td>20</td>
    <td>30</td>
    <td>10</td>
  </tr>
  </tbody>
</table>
</body>
</html>

【问题讨论】：

您应该使用带有由属性传递的 URL 模板的指令
我在此解决方案之前尝试过。但我坚持如何从控制器调用指令并获得他们的响应。你能补充一些例子吗？
不要从控制器调用指令。使用其控制器创建一个容器 html 视图并将指令放置在此视图中。现在，您有了一个标准视图，其中包含一个独特的标题和一个用于数据报告的自定义部分

标签： javascript angularjs templates compilation

【解决方案1】：

$compile 将返回一个函数，然后由scope 执行，该函数又将返回一个 jQlite 包装的 DOM 对象。所以可以使用outerHTML来获取模板字符串

或

如下图可以使用$interpolate

演示

angular.module('myApp', []);
angular
  .module('myApp')
  .controller('MyController', MyController);

function MyController($scope, $compile, $interpolate) {
  var template = '<a ng-click="handler()">click handler</a>';
  this.tmpl = $compile(template)($scope)[0].outerHTML;
  this.tmplInt = $interpolate(template)($scope);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyController as MC">
    <p><b>using $compile along with outerHTML </b>{{MC.tmpl}}</p>
    <p><b>using $interpolate </b>{{MC.tmplInt}}</p>
  </div>
</div>

【讨论】：

谢谢，但现在 var compTest = $compile(template)($scope)[0].outerHTML;返回未定义。我需要获得 HTML 输出，而不需要将生成的 HTML 放到任何视图中。
它应该可以工作！尝试调试您的应用程序并记录$compile(template)($scope) 响应。它显示了什么？
@redrom 我已经更新了与您的问题类似的演示，并且输出相同，我确信代码没有任何问题。顺便说一句，控制台中是否有任何错误
$interpolate 直接返回 HTML，但没有经过处理的 $scope。我添加了模板的 HTML 内容。