feat(uiGridStyle): Added ui-grid-style directive

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

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('<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 }}');
+    });
+  });
+
+});