multiline template in directive definition

Question

I am trying to make a directive template multiline. Is this possible?

myApp.directive('myDir', function() {
return {
    restrict: 'E',        
    template: '<div>
                |Hello,
                |{{test}}!
                |</div>'
    };
});

Here's a Fiddle to see what I mean.

Solution 1

Use "\" at the end of each line.

myApp.directive('myDir', function() {
return {
    restrict: 'E',        
    template: '<div>\
                |Hello,\
                |{{test}}!\
                |</div>'
};

Here's you Fiddle

Solution 2

I just learned you could use the symbol below the tilde (`) for multi-line template,

myApp.directive('myDir', function() {
    return {
        restrict: 'E',        
        template: `<div>
                |Hello,
                |{{test}}!
                |</div>`
    };
});

Solution 3

You could also concatenate individual strings:

myApp.directive('myDir', function() {
return {
    restrict: 'E',        
    template: '<div>' +
            'Hello,' + 
            '{{test}}!' +
            '</div>'
    };
});

Solution 4

You could also make use of the JavaScript function join() to achieve this, which I think looks better.

myApp.directive('myDir', function () {
    return {
        restrict: 'E',
        template: ['<div>',
            'Hello, ',
            '{{test}}!',
            '</div>'].join(''),
    };
});

JSFiddle is here (I removed the |'s to make it look better).

Solution 5

You can simply use graves instead of single quotes

myApp.directive('myDir', function() {
  return {
    restrict: 'E',        
    template: `<div>
        Hello, 
        {{test}}!
        </div>`
  };
});

View more solutions