AngularJS - Change properties of a class from a controller

Question

I won't harp on about the use-case for this (it's needed to override some behaviour in Angular Material which is causing bugs in Safari), but here's what I'm trying to do:

HTML:

<style>
  .changeme{
    height: 300px;
  }
</style>

<div class='changeme'>
  Some Text
</div>

My JS code looks at the height of the browser window, and I need to change the height attribute of .changeme dynamically from my controller.

I CANNOT do this via ng-style, as Angular Material strips ng-styles away from the particular element in question.

Is it possible to manipulate a <style> tag from Angular? Or are there any options for achieving this?

I dont think you can alter <style> tag. Need to have some work around. — Suresh Kamrushi
– Suresh Kamrushi, Commented Mar 24, 2016 at 6:10
What about creating a directive which will insert another <style> with an !important for the height property? — Dmitri Pavlutin
– Dmitri Pavlutin, Commented Mar 24, 2016 at 6:22

Stepan Kasyanenko · Accepted Answer · 2016-03-24 07:02:43Z

As already said, for DOM manipulation is best to use the directive.

Live example on jsfddle.

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {

  })
  .directive('changeme', function() {
    return {
      restrict: "AC",
      scope: {
        elementHeight: "="
      },
      link: function(scope, elem) {
        scope.$watch('elementHeight', function() {
          elem.css('height', scope.elementHeight);
        });
      },
    }
  });

.changeme {
  height: 300px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    Change height:
    <input ng-model="height" /> don't forget px. Example 100px.
    <div class='changeme' element-height="height">
      Some Text
    </div>
  </div>
</div>

Amir · Accepted Answer · 2016-03-24 06:34:24Z

First of all you can actually override Angular Material styles using <style> tag, but more recommended is using css file.

Secondly you can pass dynamic values for your css values by using jQuery. In jQuery you have function css(). You can pass to it the parameter name and it's value.

For example .changeme.css('height', '300px');

You can check more information about css() here.

You have to add that jQuery code in your controller. Those you can pass to it variables and manipulate it as you want.

Thirdly it is important to notice the order of your imported css files. For example if your Angular Material css file import is located most bottom in the range of css import files, then the most bottom file will override styles of classes or id's if they existed in above css files. Here's an example:

<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="angularM.css">

Let's say base.css has style property called width for class called myClass and let's suppose angularM file has also style of that same class for that same property width. In this case the styles of angularM file will override the base.css file myClass styles.

I hope the explanation of last point was not complicated.

Collectives™ on Stack Overflow

AngularJS - Change properties of a class from a controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related