我目前有一个 underscore.js 模板,我也想将它与 angular 一起使用,并且仍然能够与下划线一起使用。我想知道是否可以使用指令更改特定范围的插值开始和结束符号,如下所示:
angular.directive('underscoreTemplate', function ($parse, $compile, $interpolateProvider, $interpolate) {
return {
restrict: "E",
replace: false,
link: function (scope, element, attrs) {
$interpolateProvider.startSymbol("<%=").endSymbol("%>");
var parsedExp = $interpolate(element.html());
// Then replace element contents with interpolated contents
}
}
})
但这会吐出错误
Error: Unknown provider: $interpolateProviderProvider <- $interpolateProvider <- underscoreTemplateDirective
是$interpolateProvider
仅适用于模块配置?更好的解决方案是简单地使用字符串替换来更改 <%=
至 {{
和 %>
至 }}
?
此外,我注意到 element.html()
转义 <
在 <%=
和 >
在 %>
.有没有办法防止这种自动转义?
最佳答案
好的,您这里有几个问题,但我为您找到了解决方案。
演示
http://jsfiddle.net/colllin/zxwf2/
问题 1
你的 <
和 >
字符正在转换为 <
和 >
, 所以当你调用 element.html()
,您甚至找不到 <
的实例或 >
在那个字符串中。
第 2 期
自 $interpolate
$interpolateProvider
已经“提供”了服务,您似乎无法编辑 startSymbol 和 endSymbol。 但是,您可以在链接函数中将自定义的 startSymbol 和 endSymbol 动态转换为 Angular 开始/结束符号。
解决方案
myApp.directive('underscoreTemplate', function ($parse, $compile, $interpolate) {
return {
restrict: "A",
link: function(scope, element, attrs) {
var startSym = $interpolate.startSymbol();
var endSym = $interpolate.endSymbol();
var rawExp = element.html();
var transformedExp = rawExp.replace(/<%=/g, startSym).replace(/<%-/g, startSym).replace(/%>/g, endSym);
var parsedExp = $interpolate(transformedExp);
scope.$watch(parsedExp, function(newValue) {
element.html(newValue);
});
}
}
});
备选方案
我不确定如何,但我确定有一种方法可以实例化您自己的自定义 $interpolate
使用 $interpolateProvider
的服务(在为下划线标签配置它之后)。
关于javascript - Angularjs 为范围使用自定义插值符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18410289/