How can I turn an AngularJS template into a string?

Question

I want to pass my variables into that template, let it render, and then get the resulting HTML as a string.

How can I do that in AngularJS? Is there a similar function to the render_to_string() function in Django?

The issue is that I have an email.html template (you know, layouting emails is painful) and I would like to populate it with variables.

Let´s asume that the content of the email.html is sth like:

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Hello {{ name }}</h1>
    <div>We will contact you soon in this email address: {{ email }}</div>
  </body>
</html>

And I have an object: data = {name: 'Foo', email: '[email protected]' }

I would then expect sth similar to:

let messageBodyHtml = render('path_to_email.html', data)

And in the end, that messageBodyHtml would contain a string with this content:

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Hello Foo</h1>
    <div>We will contact you soon in this email address: [email protected]</div>
  </body>
</html>

Kstro21 · Accepted Answer · 2017-11-24 16:37:19Z

1

You can try compiling your HTML programmatically. First, remove html, head and body tags from your template, you don't need them.

email.html

<h1>Hello {{ name }}</h1>
<div>We will contact you soon in this email address: {{ email }}</div>

Use the service $compile to compile your template.

angular.controller('someController', ['$scope', '$compile', function($scope, $compile){

    var templateString = '<div ng-include="\'./email.html\'" ></div>';
    var newElem = angular.element(templateString);

    $compile(newElem)($scope); // or use $scope.$new()

    // use $timeout to wait until the $digest end and template is fetched/compiled
    $timeout(function(){
        // use .html() to get the final HTML
        console.log(newElem.html());
    });

}]);

Fetch your template using ngInclude, create an element with your template using angular.element, $compile it, use $timeout to wait until the end and then use newElem.html().

Place this code inside a function or a directive.

Hope it helps

answered Nov 24, 2017 at 16:37

Kstro21

7,84114 gold badges65 silver badges97 bronze badges

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

1 Comment

alamasfu10 Over a year ago

The $compile service is the right direction! Thanks a lot!

kmjb · Accepted Answer · 2017-11-24 12:16:32Z

1

I am not fully sure if I understand your question but I believe this will help.

So you wish to express some variables into a template and render them. This sounds almost like string formatting if I understand you. In AngularJS you can use what is called template literals. I partially believe you will require ES2015 or upwards, although I am not fully sure of which JavaScript specification is was introduced as it was called something else.

With literals you can define something like this:

let name = 'Bob';

// Notice the use of backqoutes instead of standard quotation syntax
let templateString = `<div class="content"> ${name} </div>`;

You used name as an expression which will be rendered as the string is initialized.

This can also be used for multi line strings instead of the painful \n or + to concatenate strings together.

Edit: for more about this you can view https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

You'll see you can do quite a lot with this functionality

answered Nov 24, 2017 at 12:16

kmjb

17010 bronze badges

1 Comment

alamasfu10 Over a year ago

Thanks for your answer! I edited my question to make it clearer. I knew about string formating. It would work, but the htmlcontent that I would like to include is huge, you know how painful an email template layout is :)

Collectives™ on Stack Overflow

How can I turn an AngularJS template into a string?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related