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.

score 18 · Accepted Answer · answered Apr 17 '14 at 06:19

18

Use "\" at the end of each line.

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

Here's you Fiddle

answered Apr 17 '14 at 06:19

Amir Popovich

29,350
9
53
99

1

Be careful with this. Because it's not a part of ECMAScript! -> https://github.com/jgable/open-source/blob/master/styleguides/JavaScript/language-rules.md#multiline-string-literals – Christoph Sep 24 '15 at 14:16

score 4 · Answer 2 · edited May 25 '17 at 10:18

4

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

edited May 25 '17 at 10:18

Pedro del Sol

2,840
9
39
52

answered May 25 '17 at 09:45

deepesh

65
2
6

The symbol used to enclose multi-line string is backtick (`) and is part of ES 2015 standard, more information can be found here - https://stackoverflow.com/questions/27678052/what-is-the-usage-of-the-backtick-symbol-in-javascript – deepesh May 27 '17 at 08:41

score 3 · Answer 3 · answered Jan 12 '15 at 17:37

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

score 3 · Answer 4 · answered Feb 05 '16 at 23:26

3

You could also concatenate individual strings:

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

answered Feb 05 '16 at 23:26

fran

326
3
15

score 1 · Answer 5 · answered Aug 13 '19 at 19:14

1

You can simply use graves instead of single quotes

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

answered Aug 13 '19 at 19:14

Archie Archbold

179
1
2
8

score 0 · Answer 6 · answered Jun 11 '17 at 02:10

0

You can concatenate individual strings and put the pluses at the start of each line, instead of at the end. This works out nicely if you use a 4-space tabstop: template is 8 characters long, so all the pluses will line up right below the colon.

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

Here's the JSFiddle.

answered Jun 11 '17 at 02:10

Illya Moskvin

294
1
4
15

It's surprisingly difficult to find information on whether JavaScript cares if you put the plus at the end of the trailing line or at the start of the next one. If someone has a definitive source, please share. Tested in FF, Chrome, IE 11. I figure if it wasn't always the case, that syntactic change happened a long, long time ago. – Illya Moskvin Jun 11 '17 at 02:10

multiline template in directive definition

6 Answers6