Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

Question

Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

I'm facing a situation where I need to apply ng-style (or ng-class) multiple times depending on a variable.

However, this repetitive task of writing ng-class for the same functionality for each widget is quite cumbersome for me.

Is there a way to simplify this process? I am aware that creating a custom directive could help achieve this, but my attempts so far have not been successful.

Below is an excerpt from my code:

<div class="panel panel-primary" ng-style="expanded1 ? {{'height': viewPortHeight} : ''" ng-click="expanded1=!expanded1">Panel 1</div>
..........
<div class="panel panel-primary" ng-style="expanded2 ? {{'height': viewPortHeight} : ''" ng-click="expanded2=!expanded2">Panel 2</div>

Is it possible to create a directive (C or A) that can detect the "expanded" variable for each specific element and apply the style accordingly?

I attempted to do this, but encountered difficulties.

== Custom Directive

(function (app) {
  app.directive('expandWidget', function() {
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
            scope.$watch('expanded', function(expanded){
                if(expanded)
                    element.css('height', 'viewPortHeight')
                else element.css('height', '300px')
            })
          }
      }
    })
})
<div class="panel panel-primary" expand-widget ng-click="expanded1=!expanded1">Panel 1</div>

I am open to exploring alternative approaches that can achieve the same goal as mentioned above.

javascript css angularjs angularjs-directive

Answer 1

Answer №1

Here is my take on solving your issue, I hope this solution works for you.

.directive('expandWidget', function() { return { restrict: 'A', link: function(scope, element, attrs) {

  var expanded = attrs['expanded'] === 'true' || false;
  var exapndedHeight = (attrs['exapndedHeight'] || 600) + 'px';
  var collapsedHeight = (attrs['collapsedHeight'] || 50) + 'px';

  function setHeight() {
    element[0].style.height = expanded ? exapndedHeight :  collapsedHeight;
  }

  function toggle() {
    expanded = !expanded
    setHeight();
  }

  element[0].addEventListener( attrs['trigger'] || 'click', toggle);
  setHeight();
}

} })

https://plnkr.co/edit/Hthl41G0dbZhk8v2BDFv

Answer 2

Here is my take on solving your issue, I hope this solution works for you.

.directive('expandWidget', function() { return { restrict: 'A', link: function(scope, element, attrs) {

  var expanded = attrs['expanded'] === 'true' || false;
  var exapndedHeight = (attrs['exapndedHeight'] || 600) + 'px';
  var collapsedHeight = (attrs['collapsedHeight'] || 50) + 'px';

  function setHeight() {
    element[0].style.height = expanded ? exapndedHeight :  collapsedHeight;
  }

  function toggle() {
    expanded = !expanded
    setHeight();
  }

  element[0].addEventListener( attrs['trigger'] || 'click', toggle);
  setHeight();
}

} })

https://plnkr.co/edit/Hthl41G0dbZhk8v2BDFv

Answer 3

Answer №2

If you want to control a scope variable:

$scope.expanded = false;

You can pass it as an attribute to the directive:

<div class="panel panel-primary" 
   expand-widget 
   expanded="{{ expanded }}" 
   ng-click="expanded = !expanded">

Using attrs.$observe, you can monitor changes in the expanded attribute and take action with the element(s) accordingly:

.directive('expandWidget', function() {
  return {
    restrict: 'A',
    scope: {
      expanded: '@'  
    },
    link: function(scope, element, attrs) {
      attrs.$observe('expanded', function(expanded){
        expanded = expanded == 'true'
        if (expanded) { 
          element[0].style.height = '250px'
        } else {           
          element[0].style.height = '100px'
        }   
      })
    }    
  }
})

Demo -> http://plnkr.co/edit/0FHVGwQx7jogHyGol7fN?p=preview

$scope.expanded is just one example. If you have multiple panels, you could use:

$scope.panels = {
  expanded1: true,
  expanded2: false,
  expanded3: false
  ...
}

and manipulate $scope.panels.expanded2 instead. In the example code, I set an arbitrary height since I wasn't sure what "viewPortHeight" referred to.

If you prefer toggling classes over directly modifying styles, you can do this:

attrs.$observe('expanded', function(expanded){
   expanded = expanded == 'true'
   if (expanded) { 
     $(element)
       .removeClass('defaultClass')
       .addClass('expandedClass')
   } else {            
     $(element)
       .removeClass('expandedClass')
       .addClass('defaultClass')
   }   
})

Demo -> http://plnkr.co/edit/UZWPYoTOu0ABqnVqrmw3?p=preview

It's acceptable to utilize jQuery here since bootstrap is already being used.

Answer 4

If you want to control a scope variable:

$scope.expanded = false;

You can pass it as an attribute to the directive:

<div class="panel panel-primary" 
   expand-widget 
   expanded="{{ expanded }}" 
   ng-click="expanded = !expanded">

Using attrs.$observe, you can monitor changes in the expanded attribute and take action with the element(s) accordingly:

.directive('expandWidget', function() {
  return {
    restrict: 'A',
    scope: {
      expanded: '@'  
    },
    link: function(scope, element, attrs) {
      attrs.$observe('expanded', function(expanded){
        expanded = expanded == 'true'
        if (expanded) { 
          element[0].style.height = '250px'
        } else {           
          element[0].style.height = '100px'
        }   
      })
    }    
  }
})

Demo -> http://plnkr.co/edit/0FHVGwQx7jogHyGol7fN?p=preview

$scope.expanded is just one example. If you have multiple panels, you could use:

$scope.panels = {
  expanded1: true,
  expanded2: false,
  expanded3: false
  ...
}

and manipulate $scope.panels.expanded2 instead. In the example code, I set an arbitrary height since I wasn't sure what "viewPortHeight" referred to.

If you prefer toggling classes over directly modifying styles, you can do this:

attrs.$observe('expanded', function(expanded){
   expanded = expanded == 'true'
   if (expanded) { 
     $(element)
       .removeClass('defaultClass')
       .addClass('expandedClass')
   } else {            
     $(element)
       .removeClass('expandedClass')
       .addClass('defaultClass')
   }   
})

Demo -> http://plnkr.co/edit/UZWPYoTOu0ABqnVqrmw3?p=preview

It's acceptable to utilize jQuery here since bootstrap is already being used.

Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

Answer №1

Answer №2

Similar questions

Is there a Node template engine similar to EJS that seamlessly integrates with HTML templates?

Attempting to conditionally apply CSS to a component based on a prop, but unfortunately it is not functioning as expected

capturing the HTML title and storing it in a JavaScript variable

Adjust size of item within grid component in VueJS

Suggestions for retaining dynamically modified HTML content post-response

Is it true that DOM objects in JavaScript are considered objects?

Strategies for setting up the runtime dynamically for Nextjs API routes

Implementing pagination with Django-REST and AngularJS

What is the best way to render a view, hide parameters from the URL, and pass data simultaneously?

Is there a way to deactivate the save button on a form field that shares the same label but has a different ng-model in AngularJS

Refreshing the display in an AngularJS directive

Switch between toggling tasks in Vue does not seem to be functioning as

Manipulating the InnerHTML content of a total of 144 individual cells

Looping through an array and appending distinct elements to a fresh array

What is the best way to solve the problem of Chrome auto-complete overlapping with labels in Vuetify?

Vue.js will trigger the updated() method only when a particular array undergoes changes

Methods to Exclude api_key from URL in AngularJS

Tips for personalizing the export grid menu in angular-ui-grid?

Determining the length of an array of objects within a Firebase array using AngularFire

How can you determine the dimensions of an image in HTML using Python?