Angularjs 指令定义中的多行模板

我正在尝试使指令模板多行。这可能吗

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

myApp.directive（'myDir'，function（）{
返回{
限制：'E'，
模板：'
|你好,，
|{{test}}！
|'
};
});

下面是一个例子，看看我的意思。

在每行末尾使用“\”

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

myApp.directive（'myDir'，function（）{
返回{
限制：'E'，
模板：'\
|你好,\
|{{test}}\
|'
};

---

这里是您的

您还可以使用JavaScript函数来实现这一点，我认为这看起来更好

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

myApp.directive（'myDir'，function（）{
返回{
限制：'E'，
模板：[''，
“你好，”，
“{{test}}！”，
''。加入（''），
};
});

---

在这里（我删除了

|

，使其看起来更好）。

您还可以连接单个字符串：

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

myApp.directive（'myDir'，function（）{
返回{
限制：'E'，
模板：“”+
“你好，”
“{{test}}！”+
''
};
});

我刚刚了解到，可以使用波浪线（`）下方的符号作为多行模板

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

myApp.directive（'myDir'，function（）{
返回{
限制：'E'，
模板：`
|你好,，
|{{test}}！
|`
};
});

您可以连接单个字符串并将加号放在每行的开头，而不是结尾。如果使用4个空格的制表符，效果会很好：

模板的长度为8个字符，因此所有加号将在冒号的正下方对齐

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

myApp.directive（'myDir'，function（）{
返回{
限制：'E'，
模板：“”
+“你好，”
+“{{test}}！”
+ ''
};
});

下面是答案。
您可以简单地使用graves而不是单引号

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

myApp.directive（'myDir'，function（）{
返回{
限制：'E'，
模板：`
你好
{{test}}！
`
};
});
注意这一点。因为它不是ECMAScript的一部分！->用于括起多行字符串的符号是backtick（`）作为ES 2015标准的一部分，更多信息可以在这里找到-很难找到JavaScript是否关心是否将加号放在尾行的末尾或下一行的开头的信息。如果有人有明确的来源，请分享。在FF、Chrome、IE 11中测试。我想如果不是这样，这种句法变化发生在很久很久以前。