From dfe99836cd98c2a1b0f9bde6216bd44088de275a Mon Sep 17 00:00:00 2001
From: Igor Minar <igor@angularjs.org>
Date: Sat, 11 Aug 2012 00:13:10 -0700
Subject: [PATCH] fix($compile): denormalize directive templates

Since developers are allowed to customize start/end interpolation
strings, but third-party directive creators don't know about these
customizations, we should standardize on {{ }} in templates of
reusable (third-party) directives. During the compilation, these
templates are then denormalized to use whatever the custom
start/end symbol is, effectively translating the template into the
syntax of the runtime environment.

This addresses an issue raised at http://goo.gl/e8VPV

Existing code should not be affected by this change since project
that do use custom interpolation markers are not expected to use
{{ }} in existing directive templates.
---
 src/ng/compile.js      | 12 ++++++++++++
 test/ng/compileSpec.js | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/src/ng/compile.js b/src/ng/compile.js
index 56dafc397df2..89f46af663aa 100644
--- a/src/ng/compile.js
+++ b/src/ng/compile.js
@@ -297,6 +297,15 @@ function $CompileProvider($provide) {
       }
     };
 
+    var startSymbol = $interpolate.startSymbol(),
+        endSymbol = $interpolate.endSymbol(),
+        denormalizeTemplate = (startSymbol == '{{' || endSymbol  == '}}')
+            ? identity
+            : function denormalizeTemplate(template) {
+              return template.replace(/\{\{/g, startSymbol).replace(/}}/g, endSymbol);
+            };
+
+
     return compile;
 
     //================================
@@ -579,6 +588,7 @@ function $CompileProvider($provide) {
         if ((directiveValue = directive.template)) {
           assertNoDuplicate('template', templateDirective, directive, $compileNode);
           templateDirective = directive;
+          directiveValue = denormalizeTemplate(directiveValue);
 
           if (directive.replace) {
             $template = jqLite('<div>' +
@@ -898,6 +908,8 @@ function $CompileProvider($provide) {
         success(function(content) {
           var compileNode, tempTemplateAttrs, $template;
 
+          content = denormalizeTemplate(content);
+
           if (replace) {
             $template = jqLite('<div>' + trim(content) + '</div>').contents();
             compileNode = $template[0];
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
index cbf84a3885f0..3d6144aceb45 100644
--- a/test/ng/compileSpec.js
+++ b/test/ng/compileSpec.js
@@ -1372,6 +1372,47 @@ describe('$compile', function() {
                   '<option>Greet Misko!</option>' +
                 '</select>');
     }));
+
+
+    it('should support custom start/end interpolation symbols in template and directive template',
+        function() {
+      module(function($interpolateProvider, $compileProvider) {
+        $interpolateProvider.startSymbol('##').endSymbol(']]');
+        $compileProvider.directive('myDirective', function() {
+          return {
+            template: '<span>{{hello}}|{{hello|uppercase}}</span>'
+          };
+        });
+      });
+
+      inject(function($compile, $rootScope) {
+        element = $compile('<div>##hello|uppercase]]|<div my-directive></div></div>')($rootScope);
+        $rootScope.hello = 'ahoj';
+        $rootScope.$digest();
+        expect(element.text()).toBe('AHOJ|ahoj|AHOJ');
+      });
+    });
+
+
+    it('should support custom start/end interpolation symbols in async directive template',
+        function() {
+      module(function($interpolateProvider, $compileProvider) {
+        $interpolateProvider.startSymbol('##').endSymbol(']]');
+        $compileProvider.directive('myDirective', function() {
+          return {
+            templateUrl: 'myDirective.html'
+          };
+        });
+      });
+
+      inject(function($compile, $rootScope, $templateCache) {
+        $templateCache.put('myDirective.html', '<span>{{hello}}|{{hello|uppercase}}</span>');
+        element = $compile('<div>##hello|uppercase]]|<div my-directive></div></div>')($rootScope);
+        $rootScope.hello = 'ahoj';
+        $rootScope.$digest();
+        expect(element.text()).toBe('AHOJ|ahoj|AHOJ');
+      });
+    });
   });