How to apply style rules that are tied to a model in AngularJS?

Question

I am building an application which sends 1-5 views and the appropriate model&controller to the client on page load. The user is guided to each view consecutively using routing and this is working just fine.

The problem I have is that I want to apply style rules to the view, but the style rules are tied to the model. I know that I cannot simply save some css as text and inject them into a <style></style> block. I cannot simply add a reference to a .css file because all of this is coming from a database, and each model could potentially have style rules that conflict with another model.

Any advice on how to solve this issue?

See ng-class and you're able to bind it to an object of style class name properties to booleans indicating their applied state. — miqh
– miqh, Commented May 22, 2014 at 0:34

Marc Kline · Accepted Answer · 2014-05-22 00:40:02Z

1

You can insert a style element into the page:

angular.module('myApp', [])
.controller('MyController', function($scope) {
  $scope.css = ".red { color: red;}"
})
.directive('myDirective', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      var style = angular.element('<style type="text/css"></style>');
      style.append(scope.css);
      elem.append(style);
    }
  }
});

Plunker Demo

answered May 22, 2014 at 0:40

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AnotherDeveloper Over a year ago

is there a way to get this to work in IE8? I've tried throwing all the IE8 best practices at this problem and it is still not working.

Marc Kline Over a year ago

Here, it will work in IE (but won't in other browsers): plnkr.co/edit/C37kCWFAfE8VAvUt0bQF?p=preview I'll leave the real work of making it work in both places to you ;-)

Marc Kline Over a year ago

..meaning you should be able to combine the two solutions

Jerrad · Accepted Answer · 2014-05-22 01:02:51Z

1

Here's an example of using ng-class. If you can get your css rules out of the database and into a $scope object like this:

$scope.css = {
    divcss:{
      'border-style': 'solid',
      'border-width': '2px',
      'background-color': 'yellow'
    },
    headercss:{
      'font-weight': 'bold',
      'font-size': '50px'
    }
  }

Then you can apply them to your view element like this:

<div ng-style="css.divcss">Check it out</div>
<span ng-style="css.headercss">Big ol' Header</span>

Plunker demo

answered May 22, 2014 at 1:02

Jerrad

5,3001 gold badge20 silver badges23 bronze badges

1 Comment

AnotherDeveloper Over a year ago

Thanks Jerrad. This probably wouldn't work for what we are trying to do since the css code has to be formatted in json, which I should have mentioned in the question.

Collectives™ on Stack Overflow

How to apply style rules that are tied to a model in AngularJS?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related