Angularjs 使用自定义插值符号作为范围 [英] Angularjs use custom interpolation symbols for scope

问题描述

我目前有一个 underscore.js 模板，我也想与 angular 一起使用，但仍然可以与下划线一起使用.我想知道是否可以使用指令更改特定范围的插值开始和结束符号，如下所示:

I currently have an underscore.js template that I would also like to use with angular and still be able to use with underscore. I was wondering if it's possible to change the interpolation start and end symbols for a particular scope using a directive, like this:

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
         }
     }
 })

但这会吐出错误

错误:未知提供者:$interpolateProviderProvider <- $interpolateProvider <- underscoreTemplateDirective

Error: Unknown provider: $interpolateProviderProvider <- $interpolateProvider <- underscoreTemplateDirective

$interpolateProvider 是否仅可用于模块配置?更好的解决方案是简单地使用字符串替换将 <%= 更改为 {{ 并将 %> 更改为 }}?

Is $interpolateProvider only available for module configuration? Would a better solution be to simply using string replace to change <%= to {{ and %> to }}?

另外，我注意到 element.html() 转义了 <%= 和 ><中的 </code> 在 %> 中.有没有办法防止这种自动转义?

Also, I noticed that element.html() escapes the < in <%= and > in %>. Is there a way to prevent this automatic escaping?

推荐答案

好的，您在这里遇到了一些问题，但我为您找到了解决方案.

Ok, you have a couple issues here, but I found a solution for you.

http://jsfiddle.net/colllin/zxwf2/

您的 < 和 > 字符正在转换为 < 和 >>，因此当您调用 element.html() 时，您甚至不会在该字符串中找到 < 或 > 的实例.

Your < and > characters are being converted to < and >, so when you call element.html(), you won't even find an instance of < or > in that string.

由于 $interpolate 服务已经由 $interpolateProvider 提供"，所以您似乎无法编辑 startSymbol 和 endSymbol.但是，您可以在链接函数中将自定义 startSymbol 和 endSymbol 动态转换为角度开始/结束符号.

Since the $interpolate service has already been "provided" by the $interpolateProvider, it doesn't look like you can edit the startSymbol and endSymbol. However, you can convert your custom startSymbol and endSymbol to the angular start/end symbols dynamically in your linking function.

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);
            });
        }
    }
});

替代方案

我不确定如何，但我确定有一种方法可以使用 $interpolateProvider 实例化您自己的自定义 $interpolate 服务(在将其配置为下划线之后)标签).

Alternatives

I'm not sure how, but I'm sure there's a way to instantiate your own custom $interpolate service using the $interpolateProvider (after configuring it for underscore tags).

这篇关于Angularjs 使用自定义插值符号作为范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！