指令定义中的多行模板

Question

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

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

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

Answer 1

在每行的末尾使用“\”。

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

这里是你Fiddle

Answer 2

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

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

JSFiddle是在这里（我删除了|的，使它看起来更好）。

Answer 3

你也可以串联各个字符串：

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

Answer 4

我刚刚得知你可以使用波浪号（`）为多行模板下面的符号，

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

Answer 5

您可以连接各个串和将这些加号放在每行的开头，而不是结尾。如果你使用4-space tabstop，这个效果很好：template是8个字符长，所以所有的加号都会排在冒号下面。

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

这是JSFiddle。