我很难设法让想法在某些条件下保持我的代码风格。
用例非常简单:在以角度声明内联模板时,我想保持字符串连接缩进“hmtl-like”,又名:
return {
restrict : "E",
require : "?ngModel",
transclude : true,
replace : true,
template : '' +
'<div class="tl-checkbox">' +
'<div class="tl-checkbox-container">' +
'<div class="tl-checkbox-icon"></div>' +
'</div>' +
'<div class="tl-checkbox-label" ng-transclude></div>' +
'</div>'
}
但是在应用代码样式时,这会变得扁平化:
return {
restrict : "E",
require : "?ngModel",
transclude : true,
replace : true,
template : '' +
'<div class="tl-checkbox">' +
'<div class="tl-checkbox-container">' +
'<div class="tl-checkbox-icon"></div>' +
'</div>' +
'<div class="tl-checkbox-label" ng-transclude></div>' +
'</div>'
}
这简直是难以理解,难以维护和丑陋。
我实际使用的“解决方法”是在行的开头插入空格:
return {
restrict : "E",
require : "?ngModel",
transclude : true,
replace : true,
template : '' +
'<div class="tl-checkbox">' +
' <div class="tl-checkbox-container">' +
' <div class="tl-checkbox-icon"></div>' +
' </div>' +
' <div class="tl-checkbox-label" ng-transclude></div>' +
'</div>'
}
但是这个在模板中插入空文本节点,这基本上没有没有间距的漂亮。
我的问题是:是否有一种方法可以理解我希望我的自定义缩进保留用于字符串连接,同时保持文件其余部分的代码样式/修复缩进?
编辑:在回答之前:不,使用templateUrl而不是内联模板不是一个可接受的答案,它们在复杂的布局中表现略有不同(模板的同步链接与templateUrl的异步链接)