fix(uiGridStyle): <br>s were being needlessly added

Author: c0bra

src/js/directives/ui-grid-style.js

@@ -30,15 +30,16 @@
 
 var app = angular.module('ui.grid.style', []);
 
-app.directive('uiGridStyle', ['$interpolate', function($interpolate) {
+app.directive('uiGridStyle', ['$interpolate', '$sce', function($interpolate, $sce) {
   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;
+          element.text(value);
         });
       }
     }

test/unit/directives/ui-grid-style.spec.js

@@ -4,6 +4,10 @@ describe('ui.grid.style', function() {
 
   beforeEach(module('ui.grid.style'));
 
+  beforeEach(module(function($sceProvider) {
+    $sceProvider.enabled(true);
+  }));
+
   describe('ui-grid-style', function() {
     var element, scope, compile, recompile;
 
@@ -30,6 +34,22 @@ describe('ui.grid.style', function() {
       recompile();
       expect(element.text()).toEqual('{{ foo }}');
     });
+
+    it('does not create useless <br>s', function() {
+      element = angular.element("<style ui-grid-style>{{ foo }}</style>");
+      scope.foo = '\n.bar { color: red }\n';
+      recompile();
+      dump(element.html());
+      expect(element.html()).toEqual(scope.foo);
+    });
+
+     it('works when mixing text and expressions', function() {
+      element = angular.element("<style ui-grid-style>.blah { color: {{ color }}; }</style>");
+      scope.color = 'black';
+      recompile();
+      dump(element.html());
+      expect(element.html()).toEqual('.blah { color: black; }');
+    });
   });
 
 });