Permalink
Browse files

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.
  • Loading branch information...
1 parent 0f37194 commit dfe99836cd98c2a1b0f9bde6216bd44088de275a @IgorMinar IgorMinar committed Aug 11, 2012
Showing with 53 additions and 0 deletions.
  1. +12 −0 src/ng/compile.js
  2. +41 −0 test/ng/compileSpec.js
View
@@ -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];
@@ -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');
+ });
+ });
});

0 comments on commit dfe9983

Please sign in to comment.