Manipulating class properties in AngularJS from a controller

Question

Manipulating class properties in AngularJS from a controller

I won't dwell on the reason for this (it's required to override some behavior in Angular Material that is causing issues in Safari), but here is what I am attempting to accomplish:

HTML:

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

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

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

I CANNOT achieve this using ng-style, as Angular Material removes ng-styles from the specific element in question.

Is it feasible to modify a <style> tag from Angular? Or are there any alternatives to accomplish this?

javascript css angularjs angularjs-scope

Answer 1

Answer №1

It has been mentioned before that when it comes to manipulating the DOM, the best approach is to utilize the directive.

For a live demonstration, you can visit this JSFiddle link.

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>

Answer 2

It has been mentioned before that when it comes to manipulating the DOM, the best approach is to utilize the directive.

For a live demonstration, you can visit this JSFiddle link.

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>

Answer 3

Answer №2

One way to customize Angular Material styles is by using the <style> tag, although it is more recommended to use a separate css file.

Another option is to dynamically pass values to your css properties using jQuery's css() function. By specifying the parameter name and value, you can easily manipulate styles.

For instance,

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

More information on the css() function can be found here.

This jQuery code snippet should be added in your controller where you can pass variables and modify them as needed.

Additionally, the order of imported css files is crucial. If the Angular Material css file is placed at the bottom among other imports, it will override styles from files above it for classes or ids that are defined in multiple files. Here's an example:

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

Consider a scenario where base.css sets a style property like width for a class named myClass, and the angularM file also defines the same style for that class and property. In such cases, the styles from angularM file will take precedence over those from base.css.

I hope the explanation of the last point was clear.

Answer 4

One way to customize Angular Material styles is by using the <style> tag, although it is more recommended to use a separate css file.

Another option is to dynamically pass values to your css properties using jQuery's css() function. By specifying the parameter name and value, you can easily manipulate styles.

For instance,

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

More information on the css() function can be found here.

This jQuery code snippet should be added in your controller where you can pass variables and modify them as needed.

Additionally, the order of imported css files is crucial. If the Angular Material css file is placed at the bottom among other imports, it will override styles from files above it for classes or ids that are defined in multiple files. Here's an example:

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

Consider a scenario where base.css sets a style property like width for a class named myClass, and the angularM file also defines the same style for that class and property. In such cases, the styles from angularM file will take precedence over those from base.css.

I hope the explanation of the last point was clear.

Manipulating class properties in AngularJS from a controller

Answer №1

Answer №2

Similar questions

Javascript error: Function not defined

What could be the reason behind the model returning null values?

Arabic and Latin letters become intertwined

Can you explain the concept of System.register in a JavaScript file?

Dealing with timing problems in AngularJS animations

This function is functional with jquery version 1.4.2 but encounters issues with jquery version 1.9.1

How can we verify that console.log has been called with a specific subset of expected values using Jest?

Steps for inserting a JSON Array into a database

Guide to utilizing Regex validation for checking the vehicle registration plate in Vue 3 input field

The ng-show and ng-hide directives are not working as expected, and there are no error

Tips for choosing nested elements with basic CSS selectors like nth-of-type or nth-child for Selenium

Unique rephrased text: "Varied wrapping styles in both

Leverage Ajax to dynamically refresh content on a webpage by fetching data from a text file using PHP

Utilizing Isotope JS on your Wordpress website

View cards from a restricted Trello board without requiring visitors to have a Trello account or to authorize through a popup

What is the best way to include an icon in a Vue child component?

Is there a way to adjust the scrolling speed of a background image to be slower than the rest of

What is the process for altering an SVG image following a click event in Javascript?

What steps can be taken to receive an alternative result when selecting a checkbox?

Show or conceal a class