diff --git a/src/js/directives/ui-grid-style.js b/src/js/directives/ui-grid-style.js new file mode 100644 index 0000000000..e3d48ce308 --- /dev/null +++ b/src/js/directives/ui-grid-style.js @@ -0,0 +1,48 @@ +(function(){ +// 'use strict'; + +/** + * @ngdoc directive + * @name ui.grid.style.directive:uiGridStyle + * @element style + * @restrict A + * + * @description + * Allows us to interpolate expressions in ` + I am red. + + + + */ + +var app = angular.module('ui.grid.style', []); + +app.directive('uiGridStyle', ['$interpolate', function($interpolate) { + return { + // restrict: 'A', + priority: 1000, + link: function(scope, element) { + var interpolateFn = $interpolate(element.text(), true); + if (interpolateFn) { + scope.$watch(interpolateFn, function(value) { + element[0].innerText = value; + }); + } + } + }; +}]); + +})(); \ No newline at end of file diff --git a/test/unit/directives/ui-grid-style.spec.js b/test/unit/directives/ui-grid-style.spec.js new file mode 100644 index 0000000000..671bb3f434 --- /dev/null +++ b/test/unit/directives/ui-grid-style.spec.js @@ -0,0 +1,35 @@ + +describe('ui.grid.style', function() { + var GridUtil; + + beforeEach(module('ui.grid.style')); + + describe('ui-grid-style', function() { + var element, scope, compile, recompile; + + beforeEach(inject(function($compile, $rootScope) { + scope = $rootScope; + compile = $compile; + + recompile = function() { + compile(element)(scope); + scope.$digest(); + }; + })); + + it('allows style elements to have expressions', function() { + element = angular.element(''); + scope.foo = '.bar { color: red }'; + recompile(); + + expect(element.text()).toEqual(scope.foo); + }); + + it("doesn't affect style elements without the directive", function () { + element = angular.element(''); + recompile(); + expect(element.text()).toEqual('{{ foo }}'); + }); + }); + +}); \ No newline at end of file