AngularJS - How to get processed HTML output from $compile?

Question

I have the following function which is fetching custom HTML template and passing some values into the scope to generate 'report table'. Because the template is not visible to the user but processed output is directly sent to another function I used $compile function.

It seems that values passed into the $scope are processed correctly but i am not able to get pure HTML result.

I tried to do it by this way:

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
          });

Many thanks for any advice.

Results is following:

HTML content:

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

You should use a directive with a URL template passed by an attribute instead — Troopers
– Troopers, Commented Apr 6, 2017 at 15:18
I tried it before this solution. But I stuck on how can I call directive from the controller and get their response. Could You please add some example? — redrom
– redrom, Commented Apr 6, 2017 at 15:25
Don't call the directive from the controller. Create a container html view with its controller and place the directive in this view. Now, you have a standard view with a unique header and a custom part for your data report — Troopers
– Troopers, Commented Apr 6, 2017 at 15:43

Gangadhar Jannu · Accepted Answer · 2017-04-06 14:02:56Z

1

$compile will return a function which will then be executed by scope which in turn will returns a jQlite wrapped DOM object. So you can use outerHTML to get the Template string

or

You can use $interpolate as shown below

Demo

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>

edited Apr 6, 2017 at 14:02

answered Apr 6, 2017 at 13:42

Gangadhar Jannu

4,4626 gold badges33 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

redrom Over a year ago

Thanks but now the var compTest = $compile(template)($scope)[0].outerHTML; returns undefined. I need to get HTML output without need to put generated HTML to any view.

Gangadhar Jannu Over a year ago

It should work!. Try to debug your application and log $compile(template)($scope) response. What it is showing?

Gangadhar Jannu Over a year ago

@redrom I've updated my demo similar to your question and the output is same and I'm sure there is nothing wrong in the code. BTW are there any errors in console

redrom Over a year ago

$interpolate returns HTML directly but without the processed $scope. I added HTML content of the template.

Collectives™ on Stack Overflow

AngularJS - How to get processed HTML output from $compile?

1 Answer 1

Demo

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related