AngularJS - how to set css class for the custom directive?

Question

Have tab css class for the nav html element which I'm going to use as directive like this:

<nav tab></nav>

It expected to be interpreted like this:

<nav class="tab">
    <a></a>
    <a></a>
    <a></a>
</nav>

... and everything works almost as expected except of the issue I cannot set the CSS class to the top <nav> element. Of course, I could specify it using ng-class explicitly but it seems to be not a great idea.

Have heard about .addClass() option but it doesn't work at all:

tab.directive('tab', function($compile) {
        return {
            restrict: 'A',
            templateUrl: 'nav-tab.html',
            controller: function($http, $scope) {
                $http.get('/Tab/List')
                    .success(function(data) {
                        $scope.tabs = data;
                    }).error(function() {
                        alert("error");
                    });
            },
            controllerAs: 'tab',
            link: function(element, scope) {
                angular.element(element).addClass('tab');
                $compile(element)(scope);
            }
        }
    });

How to add the CSS class to the top directive element without it's explicit specifying right at the element?

What's happening when you do .addClass? any error in console? — Pankaj Parkar
– Pankaj Parkar, Commented Sep 22, 2016 at 15:50
@PankajParkar, there's an empty Chrome console with the current code. If I use .addClass() as element.addClass() it says .addClass is not a function, I assume it occurs because there's no JQuery — WildDev
– WildDev, Commented Sep 22, 2016 at 15:52

Pankaj Parkar · Accepted Answer · 2016-09-22 16:00:09Z

3

You have a wrong sequence in link function

Instead of

link: function(element, scope) {

Change it to

link: function(scope, element, attrs) {

Then you can directly do element.addClass as jQLite api has .addClass method available on it.

edited Sep 22, 2016 at 16:00

answered Sep 22, 2016 at 15:54

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

WildDev Over a year ago

yeah it does work since I've switched to element.addClass('tab'). Thanks:)) 5mins to accept

Nix Over a year ago

Once you fix the above, you also don't need to wrap the element.

Teknotica · Accepted Answer · 2016-09-22 16:04:03Z

2

I would change your directive to be an "element" ('E' instead of 'A' for attribute)

<tab></tab>

tab.directive('tab', function($compile) {
return {
    restrict: 'E',
    templateUrl: 'nav-tab.html'...

and then add the class in your template nav-tab.html:

<nav class="tab">
  <a></a>
  <a></a>
  <a></a>
</nav>

edited Sep 22, 2016 at 16:04

answered Sep 22, 2016 at 15:59

Teknotica

1,1361 gold badge7 silver badges21 bronze badges

1 Comment

Pankaj Parkar Over a year ago

replace: true has been deprecated.. would not encourage to use it.. Without replace: true it would obviously work.

Collectives™ on Stack Overflow

AngularJS - how to set css class for the custom directive?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related