CODEWITHSUNDEEP
javascriptangularjsdjangorender
alamasfu10
alamasfu10

Reputation: 33

How can I turn an AngularJS template into a string?

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>

Upvotes: 2

Views: 246

Answers (2)

Castro Roy
Castro Roy

Reputation: 7803

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

Upvotes: 1

kmjb
kmjb

Reputation: 170

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

Upvotes: 1

Related Questions