7

我目前有一个 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
         }
     }
 })

但这会吐出错误

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

$interpolateProvider仅可用于模块配置？更好的解决方案是简单地使用字符串替换来更改<%=to{{和%>to}}吗？

另外，我注意到它element.html()逃脱了<in<%=和>in %>。有没有办法防止这种自动转义？

4

1 回答 1

4

好的，您在这里有几个问题，但我为您找到了解决方案。

演示

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

第一期

您的<and>字符正在转换为&lt;and &gt;，因此当您调用 时element.html()，您甚至不会在该字符串中找到<or的实例。>

第 2 期

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

解决方案

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(/&lt;%=/g, startSym).replace(/&lt;%-/g, startSym).replace(/%&gt;/g, endSym);
            var parsedExp = $interpolate(transformedExp);

            scope.$watch(parsedExp, function(newValue) {
                element.html(newValue);
            });
        }
    }
});

备择方案

我不确定如何，但我确信有一种方法可以使用（在为下划线标记配置它之后）实例化您自己的自定义$interpolate服务。$interpolateProvider

于 2013-10-19T00:40:01.287 回答