fix($compile): correctly denormalize templates that do not use standard interpolation symbols

In order to support third party modules that do not use the same interpolation
symbols as the main app, we implemented denormalization (see dfe9983).

This required that 3rd party modules always used the standad `{{` and `}}`
interpolation symbols, so that we could correctly denormalise them to the
current app's symbols.

The problem with this became apparent when an app template using new symbols
inadvertently contained one of the standard interpolation symbols.

E.g. `<div data-context='{"context":{"id":3,"type":"page"}}">`

The double closing curly braces were being incorrectly denormalised.

This commit fixes this by allowing the compiler to be configured to know
what symbols are being used in templates from a given module.

Now modules can specify that what interpolation symbols they use and the
compiler will denormalize appropriately.

Closes angular#6493
Closes angular#6453

Author: petebacondarwin

src/ng/compile.js

@@ -1285,6 +1285,29 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
     return TTL;
   };
 
+
+  function escapeRegExp(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+  function createGlobalRegexMatcher(str) {
+    return new RegExp(escapeRegExp(str), 'g');
+  }
+  var moduleSymbolMap = createMap();
+  var defaultSymbols = {
+    startSymbol: '{{',
+    startRegex: /\{\{/g,
+    endSymbol: '}}',
+    endRegex: /\}\}/g
+  };
+  this.moduleSymbols = function(moduleName, startSymbol, endSymbol) {
+    moduleSymbolMap[moduleName] = {
+      startSymbol: startSymbol,
+      startRegex: createGlobalRegexMatcher(startSymbol),
+      endSymbol: endSymbol,
+      endRegex: createGlobalRegexMatcher(endSymbol)
+    };
+  };
+
   this.$get = [
             '$injector', '$interpolate', '$exceptionHandler', '$templateRequest', '$parse',
             '$controller', '$rootScope', '$sce', '$animate', '$$sanitizeUri',
@@ -1585,10 +1608,15 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
 
     var startSymbol = $interpolate.startSymbol(),
         endSymbol = $interpolate.endSymbol(),
-        denormalizeTemplate = (startSymbol === '{{' && endSymbol  === '}}')
-            ? identity
-            : function denormalizeTemplate(template) {
-              return template.replace(/\{\{/g, startSymbol).replace(/}}/g, endSymbol);
+        denormalizeTemplate = function(moduleName, template) {
+          var moduleSymbols = moduleSymbolMap[moduleName] || defaultSymbols;
+          if (moduleSymbols.startSymbol !== startSymbol) {
+            template = template.replace(moduleSymbols.startRegex, startSymbol);
+          }
+          if (moduleSymbols.endSymbol !== endSymbol) {
+            template = template.replace(moduleSymbols.endRegex, endSymbol);
+          }
+          return template;
         },
         NG_ATTR_BINDING = /^ngAttr[A-Z]/;
     var MULTI_ELEMENT_DIR_RE = /^(.+)Start$/;
@@ -2274,7 +2302,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
               ? directive.template($compileNode, templateAttrs)
               : directive.template;
 
-          directiveValue = denormalizeTemplate(directiveValue);
+          directiveValue = denormalizeTemplate(directive.$$moduleName, directiveValue);
 
           if (directive.replace) {
             replaceDirective = directive;
@@ -2782,7 +2810,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         .then(function(content) {
           var compileNode, tempTemplateAttrs, $template, childBoundTranscludeFn;
 
-          content = denormalizeTemplate(content);
+          content = denormalizeTemplate(origAsyncDirective.$$moduleName, content);
 
           if (origAsyncDirective.replace) {
             if (jqLiteIsTextNode(content)) {

test/ng/compileSpec.js

@@ -3155,6 +3155,26 @@ describe('$compile', function() {
       });
     });
 
+    it('should allow modules to specify what interpolation symbol is used in templates', function() {
+      angular.module('symbol-test', [])
+        .directive('myDirective', function() {
+          return {
+            template: '<span foo=\'{"ctx":{"id":3}}\'></span>'
+          };
+        });
+
+      module('symbol-test', function($interpolateProvider, $compileProvider) {
+        $interpolateProvider.startSymbol('##');
+        $interpolateProvider.endSymbol(']]');
+        $compileProvider.moduleSymbols('symbol-test', '##', ']]');
+      });
+
+      inject(function($compile) {
+        element = $compile('<div><div my-directive></div></div>')($rootScope);
+        expect(element.children('div').children('span').attr('foo')).toBe('{"ctx":{"id":3}}');
+      });
+    });
+
 
     it('should support custom start interpolation symbol, even when `endSymbol` doesn\'t change',
       function() {