Question

我正在尝试制作一个指令模板多行。这可能吗？

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

这是一个Fiddle，看看我的意思。

Answer 1

使用＆＃34; \＆＃34;在每一行的末尾。

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

这是你Fiddle

Answer 2

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

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

Answer 3

您也可以使用JavaScript函数join()来实现这一点，我认为这看起来更好。

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

JSFiddle就在这里（我删除了|以使其看起来更好）。

Answer 4

我刚学会了你可以使用波浪线（`）下面的符号表示多行模板，

jj

Answer 5

您可以连接单个字符串和将加号放在每行的开头，而不是结尾处。如果你使用一个4空格的tabstop，这很好用：template是8个字符长，所以所有的加号都会排在冒号的正下方。

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

这里是JSFiddle。

Answer 6

您可以简单地使用坟墓代替单引号

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

指令定义中的多行模板

6 个答案: