Skip to content

Commit

Permalink
feat(uiGridStyle): Added ui-grid-style directive
Browse files Browse the repository at this point in the history
  • Loading branch information
c0bra committed Dec 17, 2013
1 parent 2ae813e commit 5687723
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 0 deletions.
48 changes: 48 additions & 0 deletions src/js/directives/ui-grid-style.js
Original file line number Diff line number Diff line change
@@ -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 `<style>` elements. Angular doesn't do this by default as it can/will/might? break in IE8.
*
* @example
<example module="app">
<file name="app.js">
var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.myStyle = '.blah { color: red }';
}]);
</file>
<file name="index.html">
<div ng-controller="MainCtrl">
<style ui-grid-style>{{ myStyle }}</style>
<span class="blah">I am red.</span>
</div>
</file>
</example>
*/

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;
});
}
}
};
}]);

})();
35 changes: 35 additions & 0 deletions test/unit/directives/ui-grid-style.spec.js
Original file line number Diff line number Diff line change
@@ -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('<style ui-grid-style>{{ foo }}</style>');
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('<style>{{ foo }}</style>');
recompile();
expect(element.text()).toEqual('{{ foo }}');
});
});

});

0 comments on commit 5687723

Please sign in to comment.