Question

我有以下函数来获取自定义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>

Answer 1

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

或

您可以使用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); }，如下所示

演示

＆＃13;

<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>

＆＃13;

class.getResourceAsStream

＆＃13;

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

1 个答案:

演示