Making Interpolation Symbols Configurable

Author: teropa

src/compile.js

@@ -101,6 +101,15 @@ function $CompileProvider($provide) {
   this.$get = ['$injector', '$parse', '$controller', '$rootScope', '$http', '$interpolate',
       function($injector, $parse, $controller, $rootScope, $http, $interpolate) {
 
+    var startSymbol = $interpolate.startSymbol();
+    var endSymbol   = $interpolate.endSymbol();
+    var denormalizeTemplate = (startSymbol === '{{' && endSymbol === '}}') ?
+      _.identity :
+      function(template) {
+        return template.replace(/\{\{/g, startSymbol)
+          .replace(/\}\}/g, endSymbol);
+      };
+
     function Attributes(element) {
       this.$$element = element;
       this.$attr = {};
@@ -253,9 +262,14 @@ function $CompileProvider($provide) {
                 if (!transcludedScope) {
                   transcludedScope = scope.$new(false, containingScope);
                 }
-                return linkFn.nodeLinkFn.transclude(transcludedScope, cloneAttachFn, {
-                  transcludeControllers: transcludeControllers
+                var didTransclude = linkFn.nodeLinkFn.transclude(transcludedScope, cloneAttachFn, {
+                  transcludeControllers: transcludeControllers,
+                  parentBoundTranscludeFn: parentBoundTranscludeFn
                 });
+                if (didTransclude.length === 0 && parentBoundTranscludeFn) {
+                  didTransclude = parentBoundTranscludeFn(transcludedScope, cloneAttachFn);
+                }
+                return didTransclude;
               };
             } else if (parentBoundTranscludeFn) {
               boundTranscludeFn = parentBoundTranscludeFn;
@@ -503,6 +517,7 @@ function $CompileProvider($provide) {
       var linkQueue = [];
       $compileNode.empty();
       $http.get(templateUrl).success(function(template) {
+        template = denormalizeTemplate(template);
         directives.unshift(derivedSyncDirective);
         $compileNode.html(template);
         afterTemplateNodeLinkFn = applyDirectivesToNode(directives, $compileNode, attrs, previousCompileContext);
@@ -641,9 +656,11 @@ function $CompileProvider($provide) {
             throw 'Multiple directives asking for template';
           }
           templateDirective = directive;
-          $compileNode.html(_.isFunction(directive.template) ?
+          var template = _.isFunction(directive.template) ?
                               directive.template($compileNode, attrs) :
-                              directive.template);
+                              directive.template;
+          template = denormalizeTemplate(template);
+          $compileNode.html(template);
         }
         if (directive.templateUrl) {
           if (templateDirective) {

src/interpolate.js

@@ -2,6 +2,26 @@
 'use strict';
 
 function $InterpolateProvider() {
+  var startSymbol = '{{';
+  var endSymbol = '}}';
+
+  this.startSymbol = function(value) {
+    if (value) {
+      startSymbol = value;
+      return this;
+    } else {
+      return startSymbol;
+    }
+  };
+
+  this.endSymbol = function(value) {
+    if (value) {
+      endSymbol = value;
+      return this;
+    } else {
+      return endSymbol;
+    }
+  };
 
   function stringify(value) {
     if (_.isNull(value) || _.isUndefined(value)) {
@@ -13,12 +33,18 @@ function $InterpolateProvider() {
     }
   }
 
-  function unescapeText(text) {
-    return text.replace(/\\{\\{/g, '{{')
-               .replace(/\\}\\}/g, '}}');
+  function escapeChar(char) {
+    return '\\\\\\' + char;
   }
 
   this.$get = ['$parse', function($parse) {
+    var escapedStartMatcher = new RegExp(startSymbol.replace(/./g, escapeChar), 'g');
+    var escapedEndMatcher   = new RegExp(endSymbol.replace(/./g, escapeChar), 'g');
+
+    function unescapeText(text) {
+      return text.replace(escapedStartMatcher, startSymbol)
+                 .replace(escapedEndMatcher, endSymbol);
+    }
 
     function $interpolate(text, mustHaveExpressions) {
       var index = 0;
@@ -28,21 +54,21 @@ function $InterpolateProvider() {
       var expressionPositions = [];
       var startIndex, endIndex, exp, expFn;
       while (index < text.length) {
-        startIndex = text.indexOf('{{', index);
+        startIndex = text.indexOf(startSymbol, index);
         if (startIndex !== -1) {
-          endIndex = text.indexOf('}}', startIndex + 2);
+          endIndex = text.indexOf(endSymbol, startIndex + startSymbol.length);
         }
         if (startIndex !== -1 && endIndex !== -1) {
           if (startIndex !== index) {
             parts.push(unescapeText(text.substring(index, startIndex)));
           }
-          exp = text.substring(startIndex + 2, endIndex);
+          exp = text.substring(startIndex + startSymbol.length, endIndex);
           expFn = $parse(exp);
           expressions.push(exp);
           expressionFns.push(expFn);
           expressionPositions.push(parts.length);
           parts.push(expFn);
-          index = endIndex + 2;
+          index = endIndex + endSymbol.length;
         } else {
           parts.push(unescapeText(text.substring(index)));
           break;
@@ -82,6 +108,9 @@ function $InterpolateProvider() {
 
     }
 
+    $interpolate.startSymbol = _.constant(startSymbol);
+    $interpolate.endSymbol   = _.constant(endSymbol);
+
     return $interpolate;
   }];
 

test/compile_spec.js

@@ -3790,6 +3790,24 @@ describe('$compile', function() {
       });
     });
 
+    it('denormalizes directive templates', function() {
+    var injector = createInjector(['ng', function($interpolateProvider, $compileProvider) {
+      $interpolateProvider.startSymbol('[[').endSymbol(']]');
+      $compileProvider.directive('myDirective', function() {
+        return {
+          template: 'Value is {{myExpr}}'
+        };
+      });
+    }]);
+    injector.invoke(function($compile, $rootScope) {
+      var el = $('<div my-directive></div>');
+      $rootScope.myExpr = 42;
+      $compile(el)($rootScope);
+      $rootScope.$apply();
+
+      expect(el.html()).toEqual('Value is 42');
+    });
+  });
 
   });
 

test/interpolate_spec.js

@@ -143,4 +143,40 @@ describe('$interpolate', function() {
     expect(listenerSpy.calls.mostRecent().args[1]).toEqual('42');
   });
 
+  it('allows configuring start and end symbols', function() {
+    var injector = createInjector(['ng', function($interpolateProvider) {
+      $interpolateProvider.startSymbol('FOO').endSymbol('OOF');
+    }]);
+    var $interpolate = injector.get('$interpolate');
+    expect($interpolate.startSymbol()).toEqual('FOO');
+    expect($interpolate.endSymbol()).toEqual('OOF');
+  });
+
+  it('works with start and end symbols that differ from default', function() {
+    var injector = createInjector(['ng', function($interpolateProvider) {
+      $interpolateProvider.startSymbol('FOO').endSymbol('OOF');
+    }]);
+    var $interpolate = injector.get('$interpolate');
+    var interpFn = $interpolate('FOOmyExprOOF');
+    expect(interpFn({myExpr: 42})).toEqual('42');
+  });
+
+  it('does not work with default start and end symbols when reconfigured', function() {
+    var injector = createInjector(['ng', function($interpolateProvider) {
+      $interpolateProvider.startSymbol('FOO').endSymbol('OOF');
+    }]);
+    var $interpolate = injector.get('$interpolate');
+    var interpFn = $interpolate('{{myExpr}}');
+    expect(interpFn({myExpr: 42})).toEqual('{{myExpr}}');
+  });
+
+  it('supports unescaping for reconfigured symbols', function() {
+    var injector = createInjector(['ng', function($interpolateProvider) {
+      $interpolateProvider.startSymbol('FOO').endSymbol('OOF');
+    }]);
+    var $interpolate = injector.get('$interpolate');
+    var interpFn = $interpolate('\\F\\O\\OmyExpr\\O\\O\\F');
+    expect(interpFn({})).toEqual('FOOmyExprOOF');
+  });
+
 });