What is the best way to access the ng-class attribute value within a directive

Question

What is the best way to access the ng-class attribute value within a directive

I am encountering a situation where I have some repeated 'li' elements, and some of them are assigned the 'active' class based on certain conditions.

<li ng-repeat="menuSubItem in menuItem.items" ng-class="{active: vm.currentMenuName == menuSubItem.name}" active-collapsible>

On the other hand, I have created a directive that is intended to apply additional classes depending on the presence of the 'active' class. My directive looks like this:

directive('activeCollapsible', function() {
  return {
    restrict: 'A',
    link: function($scope, element, attrs) {

    }
  }
});

However, I am facing an issue as I do not see the 'active' class in the 'element' argument. (I have already included jQuery before Angular.)

$(element).hasClass('active')

Is there a way for me to access the 'active' class within my directive?

javascript angularjs angularjs-directive ng-class angularjs-ng-class

Answer 1

Answer №1

To determine if an element has the active class, you can utilize the $watch function on the scope. This function will be evaluated during each digest cycle and will return either true or false based on whether the element has the 'active' class.

Custom Directive Example

directive('activeCollapsible', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $scope.$watch(function() {
                return element.hasClass('active')
            }, function(newVal) {
                if (newVal) //element has active Class
                //perform some action
            });
        };
    };
});

Answer 2

To determine if an element has the active class, you can utilize the $watch function on the scope. This function will be evaluated during each digest cycle and will return either true or false based on whether the element has the 'active' class.

Custom Directive Example

directive('activeCollapsible', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $scope.$watch(function() {
                return element.hasClass('active')
            }, function(newVal) {
                if (newVal) //element has active Class
                //perform some action
            });
        };
    };
});

What is the best way to access the ng-class attribute value within a directive

Answer №1

Similar questions

Can you save data entered by a user into a text file using JavaScript or a similar technology in HTML, without the need to send it to a server?

What is the best way to assign unique IDs to automatically generated buttons in Angular?

Creating a visual representation of a JSON tree using nested <ul> elements in AngularJS

Is it possible to adjust the height of the apprequests dialog?

Creating a form for adding and editing using React Hook Form

Is it feasible in JavaScript to restrict selecting only complete nodes within a range selection?

The submission button will show the options of "Yes" or "

Transferring API information into a nested array and displaying the outcome

Saving dynamic elements within nested AngularJS scopes

Why do my paths encounter issues when I alter the manner in which I deliver my index.html file?

Display temperature in the format of '27.0 °C' using either query manipulation or Javascript code

Compress and condense AngularJS Source Code without using NodeJS

Accessing JSON fields containing accents in JavaScript

Creating a formatted string using a specific pattern

Modifying an object's label based on a particular value using JavaScript

Trouble loading nested view template

Ramjet: Unveiling the Magic of Making Elements Appear and Disappear

"I'm encountering an issue with the discord.js module when I try to launch my bot using node. Any ideas on how

Converting an object of objects into an associative array using Javascript and JSON

Update the root URL for a specific asset