CODEWITHSUNDEEP
javascriptcssangularjsangularjs-scope
JVG
JVG

Reputation: 21150

AngularJS - Change properties of a class from a controller

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?

Upvotes: 1

Views: 1928

Answers (2)

Stepan Kasyanenko
Stepan Kasyanenko

Reputation: 3186

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>

Upvotes: 2

Amir
Amir

Reputation: 1061

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.

Upvotes: 0

Related Questions