Angularjs使用自定义插值符号作为范围

Question

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

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仅适用于模块配置？会更好的解决方案是简单地使用字符串替换改变<%=到{{和%>到}}？

此外,我注意到element.html()逃脱了<进入<%=和>进入%>.有没有办法防止这种自动转义？

Answer 1

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

演示

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

第1期

您的<和>字符正在转换为<and >，因此当您调用 时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(/<%=/g, startSym).replace(/<%-/g, startSym).replace(/%>/g, endSym);
            var parsedExp = $interpolate(transformedExp);

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

备择方案

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