fix($compile): correctly denormalize templates that do not use standa…

…rd 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 #6493
Closes #6453

src/ng/compile.js

@@ -1292,6 +1292,9 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
   function createGlobalRegexMatcher(str) {
     return new RegExp(escapeRegExp(str), 'g');
   }
+  function escapeSymbol(str) {
+    return str.replace(/./g, '\\$&');
+  }
   var moduleSymbolMap = createMap();
   var defaultSymbols = {
     startSymbol: '{{',
@@ -1607,13 +1610,17 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
 
 
     var startSymbol = $interpolate.startSymbol(),
+        startSymbolRegex = createGlobalRegexMatcher(startSymbol),
         endSymbol = $interpolate.endSymbol(),
+        endSymbolRegex = createGlobalRegexMatcher(endSymbol),
         denormalizeTemplate = function(moduleName, template) {
           var moduleSymbols = moduleSymbolMap[moduleName] || defaultSymbols;
           if (moduleSymbols.startSymbol !== startSymbol) {
+            template = template.replace(startSymbolRegex, escapeSymbol);
             template = template.replace(moduleSymbols.startRegex, startSymbol);
           }
           if (moduleSymbols.endSymbol !== endSymbol) {
+            template = template.replace(endSymbolRegex, escapeSymbol);
             template = template.replace(moduleSymbols.endRegex, endSymbol);
           }
           return template;

test/ng/compileSpec.js

@@ -3155,23 +3155,52 @@ describe('$compile', function() {
       });
     });
 
-    it('should allow modules to specify what interpolation symbol is used in templates', function() {
+    it('should denormalise interpolation symbols in templates correctly, if different to the current symbols', function() {
       angular.module('symbol-test', [])
         .directive('myDirective', function() {
           return {
-            template: '<span foo=\'{"ctx":{"id":3}}\'></span>'
+            template: '<span foo=\'{"ctx":{"id":3}}\'>[[1 + 2]]</span>'
           };
+        })
+        .config(function($compileProvider) {
+          $compileProvider.moduleSymbols('symbol-test', '[[', ']]');
         });
 
-      module('symbol-test', function($interpolateProvider, $compileProvider) {
-        $interpolateProvider.startSymbol('##');
-        $interpolateProvider.endSymbol(']]');
-        $compileProvider.moduleSymbols('symbol-test', '##', ']]');
+      module('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\\}\\}');
+        expect(element.text()).toEqual('{{1 + 2}}');
+        $rootScope.$apply();
+        expect(element.text()).toEqual('3');
+      });
+    });
+
+
+    it('should escape the current interpolation symbols in templates, before denormalising, if the template module symbols are different', function() {
+      angular.module('symbol-test', [])
+        .directive('myDirective', function() {
+          return {
+            template: '<span>{[1 + 2]}[[3 + 4]]</span>'
+          };
+        })
+        .config(function($compileProvider) {
+          // Specify that the templates in this module use `[[` and `]]` interpolation symbols
+          $compileProvider.moduleSymbols('symbol-test', '[[', ']]');
+        });
+
+      module('symbol-test', function($interpolateProvider) {
+        // Specify that this app uses `{[` and `]}` as interpolation symbols
+        $interpolateProvider.startSymbol('{[');
+        $interpolateProvider.endSymbol(']}');
       });
 
       inject(function($compile) {
         element = $compile('<div><div my-directive></div></div>')($rootScope);
-        expect(element.children('div').children('span').attr('foo')).toBe('{"ctx":{"id":3}}');
+        expect(element.text()).toEqual('\\{\\[1 + 2\\]\\}{[3 + 4]}');
+        $rootScope.$apply();
+        expect(element.text()).toEqual('{[1 + 2]}7');
       });
     });