From 555ddecddeb967f338f8bdf4da814d74f8b44495 Mon Sep 17 00:00:00 2001 From: c0bra Date: Fri, 7 Nov 2014 09:44:58 -0600 Subject: [PATCH] feat(Interpolation): Handle custom symbols * Add a postProcessTemplate() function to the gridUtil service that swaps out interpolation symbols if they're different from the default ones. * Change getTemplate() to use this function when returning templates * Add tests to the gridUtil spec for getTemplate() with custom interpolation symbols Fixes #1576 --- .../313_custom_interpolation_symbols.ngdoc | 54 +++++++++ src/js/core/services/ui-grid-util.js | 29 +++-- test/unit/core/services/ui-grid-util.spec.js | 106 +++++++++++++++++- 3 files changed, 179 insertions(+), 10 deletions(-) create mode 100644 misc/tutorial/313_custom_interpolation_symbols.ngdoc diff --git a/misc/tutorial/313_custom_interpolation_symbols.ngdoc b/misc/tutorial/313_custom_interpolation_symbols.ngdoc new file mode 100644 index 0000000000..5908433471 --- /dev/null +++ b/misc/tutorial/313_custom_interpolation_symbols.ngdoc @@ -0,0 +1,54 @@ +@ngdoc overview +@name Tutorial: 313 Custom Interpolation Symbols +@description + +Combining AngularJS with other frameworks/tools sometimes requires changing the normal interpolation symbols (`{{` and `}}`) to something else, like `[[` or `%`. +
+
+UI Grid will automatically detect the change and transform any default symbols in the templates it uses to the custom values. This means that in the unlikely event +you're expecting to use `{{` or `}}` to signify something in your custom-interpolation-symbol application, then inside the grid your stuff will likely break. + + + + var app = angular.module('app', ['ngAnimate', 'ui.grid']); + + app.config(function($interpolateProvider) { + $interpolateProvider.startSymbol('[['); + $interpolateProvider.endSymbol(']]'); + }); + + app.controller('MainCtrl', ['$scope', '$http', '$interpolate', function ($scope, $http, $interpolate) { + $scope.foo = 'whoohoo!'; + $scope.startSym = $interpolate.startSymbol(); + $scope.endSym = $interpolate.endSymbol(); + + $scope.gridOptions = { + enableSorting: true, + columnDefs: [ + { field: 'name' }, + { field: 'gender' }, + { field: 'company', enableSorting: false } + ] + }; + + $http.get('/data/100.json') + .success(function(data) { + $scope.gridOptions.data = data; + }); + }]); + + +
+ This app uses [[ startSym ]] and [[ endSym ]] for interpolation symbols: [[ foo ]] +
+
+
+
+
+ + .grid { + width: 500px; + height: 300px; + } + +
diff --git a/src/js/core/services/ui-grid-util.js b/src/js/core/services/ui-grid-util.js index 72f3c180e0..9c64015d14 100644 --- a/src/js/core/services/ui-grid-util.js +++ b/src/js/core/services/ui-grid-util.js @@ -139,8 +139,8 @@ var uidPrefix = 'uiGrid-'; * * @description Grid utility functions */ -module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateCache', '$timeout', '$injector', '$q', 'uiGridConstants', - function ($log, $window, $document, $http, $templateCache, $timeout, $injector, $q, uiGridConstants) { +module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateCache', '$timeout', '$injector', '$q', '$interpolate', 'uiGridConstants', + function ($log, $window, $document, $http, $templateCache, $timeout, $injector, $q, $interpolate, uiGridConstants) { var s = { getStyles: getStyles, @@ -315,25 +315,25 @@ module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateC getTemplate: function (template) { // Try to fetch the template out of the templateCache if ($templateCache.get(template)) { - return $q.when($templateCache.get(template)); + return s.postProcessTemplate($templateCache.get(template)); } // See if the template is itself a promise if (template.hasOwnProperty('then')) { - return template; + return template.then(s.postProcessTemplate); } // If the template is an element, return the element try { if (angular.element(template).length > 0) { - return $q.when(template); + return $q.when(template).then(s.postProcessTemplate); } } catch (err){ //do nothing; not valid html } - $log.debug('Fetching url', template); + s.logDebug('fetching url', template); // Default to trying to fetch the template as a url with $http return $http({ method: 'GET', url: template}) @@ -347,7 +347,22 @@ module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateC function (err) { throw new Error("Could not get template " + template + ": " + err); } - ); + ) + .then(s.postProcessTemplate); + }, + + // + postProcessTemplate: function (template) { + var startSym = $interpolate.startSymbol(), + endSym = $interpolate.endSymbol(); + + // If either of the interpolation symbols have been changed, we need to alter this template + if (startSym !== '{{' || endSym !== '}}') { + template = template.replace(/\{\{/g, startSym); + template = template.replace(/\}\}/g, endSym); + } + + return $q.when(template); }, /** diff --git a/test/unit/core/services/ui-grid-util.spec.js b/test/unit/core/services/ui-grid-util.spec.js index 6d53794e61..fa1150c0e8 100644 --- a/test/unit/core/services/ui-grid-util.spec.js +++ b/test/unit/core/services/ui-grid-util.spec.js @@ -1,14 +1,21 @@ describe('ui.grid.utilService', function() { var gridUtil, $window, - Grid; + Grid, + $rootScope, + $q, + $interpolateProvider; - beforeEach(module('ui.grid')); + beforeEach(module('ui.grid', function (_$interpolateProvider_) { + $interpolateProvider = _$interpolateProvider_; + })); - beforeEach(inject(function(_gridUtil_, _$window_, _Grid_) { + beforeEach(inject(function(_$rootScope_, _$q_, _gridUtil_, _$window_, _Grid_) { gridUtil = _gridUtil_; $window = _$window_; Grid = _Grid_; + $rootScope = _$rootScope_; + $q = _$q_; })); describe('newId()', function() { @@ -396,4 +403,97 @@ describe('ui.grid.utilService', function() { expect(uid3).toEqual('uiGrid-003'); }); }); + + describe('postProcessTemplate', function () { + it('should return unmodified template when interpolation symbols are the default values ( {{ / }} )', function () { + var tmpl; + gridUtil.getTemplate('ui-grid/ui-grid') + .then(function (template) { + tmpl = template; + }); + + $rootScope.$digest(); + + expect(tmpl).toMatch(/\{\{/, 'template has default start interpolation symbols'); + expect(tmpl).toMatch(/\}\}/, 'template has default end interpolation symbols'); + }); + + describe('with different interpolation symbols', function () { + beforeEach(function () { + $interpolateProvider.startSymbol('[['); + $interpolateProvider.endSymbol(']]'); + }); + + it('should alter templates already in $templateCache', function () { + var tmpl; + gridUtil.getTemplate('ui-grid/ui-grid') + .then(function (template) { + tmpl = template; + }); + + $rootScope.$digest(); + + expect(tmpl).not.toMatch(/\{\{/, 'template does not have default start interpolation symbols'); + expect(tmpl).not.toMatch(/\}\}/, 'template does not have default end interpolation symbols'); + + expect(tmpl).toMatch(/\[\[/, 'template has custom start interpolation symbols'); + expect(tmpl).toMatch(/\]\]/, 'template has custom end interpolation symbols'); + }); + + it('should alter template that is just an element', function () { + var tmpl; + gridUtil.getTemplate('
{{ foo }}
') + .then(function (template) { + tmpl = template; + }); + + $rootScope.$digest(); + + expect(tmpl).not.toMatch(/\{\{/, 'template does not have default start interpolation symbols'); + expect(tmpl).not.toMatch(/\}\}/, 'template does not have default end interpolation symbols'); + + expect(tmpl).toMatch(/\[\[/, 'template has custom start interpolation symbols'); + expect(tmpl).toMatch(/\]\]/, 'template has custom end interpolation symbols'); + }); + + it('should alter template that is a promise', function () { + var p = $q.when('
{{ foo }}
'); + + var tmpl; + gridUtil.getTemplate(p) + .then(function (template) { + tmpl = template; + }); + + $rootScope.$digest(); + + expect(tmpl).not.toMatch(/\{\{/, 'template does not have default start interpolation symbols'); + expect(tmpl).not.toMatch(/\}\}/, 'template does not have default end interpolation symbols'); + + expect(tmpl).toMatch(/\[\[/, 'template has custom start interpolation symbols'); + expect(tmpl).toMatch(/\]\]/, 'template has custom end interpolation symbols'); + }); + + it('should alter template fetched with $http', inject(function ($httpBackend, $timeout) { + var html = '
{{ foo }}
'; + var url = 'http://someUrl.html'; + $httpBackend.expectGET(url) + .respond(html); + + var result; + gridUtil.getTemplate(url).then(function (r) { + result = r; + }); + $httpBackend.flush(); + + $httpBackend.verifyNoOutstandingRequest(); + + expect(result).not.toMatch(/\{\{/, 'template does not have default start interpolation symbols'); + expect(result).not.toMatch(/\}\}/, 'template does not have default end interpolation symbols'); + + expect(result).toMatch(/\[\[/, 'template has custom start interpolation symbols'); + expect(result).toMatch(/\]\]/, 'template has custom end interpolation symbols'); + })); + }); + }); }); \ No newline at end of file