Add ng-class attribute to root element of angularjs directive

Question

I hav a directive that looks roughly like this, with an ng-class in the template:

module.directive('myDirective', [function() {
    return {
        restrict: 'E',
        template: `<div ng-class="{'foo-expanded': expanded, 'foo': !expanded}"><div>`
        //...
    }
}]);

My problem is, my classes from the ng-class are applied to the div, which ends up being nested inside of the directive element after the directive is compiled: <my-directive><div>...</div></my-directive>.

Is there any way to apply the classes to the root <my-directive> element instead? I know I can dynamically add the class using javascript in the link function or controller instead of the ng-class, but I am looking for a way to avoid this.

Taki · Accepted Answer · 2020-02-24 19:53:01Z

2

You can do that using the link function which gives you access to the created element ( directive )

module.directive('myDirective', [function() {
    return {
        restrict: 'E',
        template: `<div ng-class="{'foo-expanded': expanded, 'foo': !expanded}"><div>`
        link: function(scope, element, attrs) {        
           element[0].classList.add('test')
        }
    }
}]);

answered Feb 24, 2020 at 19:53

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

elethan Over a year ago

Thanks for your suggestion. However, I would like to avoid adding the classes with javascript from the link function or controller. The problem is, that I would have to introduce a lot more complexity to get the same functionality as the ng-class. For example, I would need the method that toggles the expanded flag to to add and remove classes each time the flag changes (or something similar to that). However, your solution is likely to be the path I take if I can't figure out anything else, in which case I will select your answer.

Community · Accepted Answer · 2020-06-20 09:12:55Z

This answer shows two different ways

Manipulate the classes from the controller
Use replace: true (deprecated)

Manipulate the classes from the controller

If you don't want to use replace: true, you can manipulate the directive's root classes from the controller by injecting $element.

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: `
          <div ng-class="{'foo-expanded': expanded, 'foo': !expanded}">
             MY DIRECTIVE
          <div>
        `,
        controller: function($element) {
            $element.addClass("foo test test2");
            $element.toggleClass("foo-expanded");
            $element.removeClass("test2");
        }
    }
});

The DEMO on PLNKR

For more information, see

AngularJS element API Reference

Use `replace: true` (deprecated)

Another approach is to use replace: true:

module.directive('myDirective', [function() {
    return {
        restrict: 'E',
        replace: true,
        template: `<div ng-class="{'foo-expanded': expanded, 'foo': !expanded}"><div>`
        //...
    }
}]);

Keep in mind that the replace property is deprecated in AngularJS and has been removed in the new Angular (v2+).

For more information, see

Collectives™ on Stack Overflow

Add ng-class attribute to root element of angularjs directive

2 Answers 2

1 Comment

Manipulate the classes from the controller

Use `replace: true` (deprecated)

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Manipulate the classes from the controller

Use replace: true (deprecated)

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Use `replace: true` (deprecated)