AngularJs - Adding Custom class on UI-Bootstrap's Tab

Question

How can I replace or add a new class on UI-Bootsrap's Tab Nav. I'm expecting something like,

<ul class="MY-CUSTOM-CLASS" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
       <li ng-class="{active: active, disabled: disabled}" heading="Justified" class="ng-isolate-scope">
            <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Justified</a>
       </li>

       .....          
</ul>

I've tried the following but, it's adding the class to the parent,

<tabset justified="true" class="tab-nav">
       <tab heading="Justified">Justified content</tab>
       <tab heading="SJ">Short Labeled Justified content</tab>
       <tab heading="Long Justified">Long Labeled Justified content</tab>
</tabset>

You want to add a custom class to the <ul> instead of the surrounding <div>? Do you need this only for one tabset or for all the same and does the value need to be dynamic or static? — Numyx
– Numyx, Commented Jun 13, 2015 at 18:37
@Numyx Yes, I need the custom class for <ul> tag. I have different classes for different tabsets. Values are static. — Body
– Body, Commented Jun 13, 2015 at 18:45

Numyx · Accepted Answer · 2015-06-13 19:37:06Z

6

Ok, what you wan't to do is not supported by the ui bootstrap module, so we need to extend the module to get the requested behavior. To do that we will use decorators:

.config(function($provide) {

  // This adds the decorator to the tabset directive 
  // @see https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js#L88 
  $provide.decorator('tabsetDirective', function($delegate) {

    // The `$delegate` contains the configuration of the tabset directive as 
    // it is defined in the ui bootstrap module.
    var directive = $delegate[0];

    // This is the original link method from the directive definition
    var link = directive.link;

    // This sets a compile method to the directive configuration which will provide
    // the modified/extended link method
    directive.compile = function() {

      // Modified link method
      return function(scope, element, attrs) {

        // Call the original `link` method
        link(scope, element, attrs);

        // Get the value for the `custom-class` attribute and assign it to the scope.
        // This is the same the original link method does for the `vertical` and ``justified` attributes
        scope.customClass = attrs.customClass;
      }
    }

    // Return the modified directive
    return $delegate;
  });
});

This takes the old link method of the tabset directive and wraps it with an custom method that in addition to the old method also binds the value of the custom-class attribute to the scope. Second thing we need to do is overriding the template to actually use the scope.customClass parameter:

There are multiple ways to this either use the $templateProvider or maybe simpler way use a <scrip type="text/ng-template">:

  <script id="template/tabs/tabset.html" type="text/ng-template">
    <div>
      <ul class="{{customClass}} nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
      <div class="tab-content">
        <div class="tab-pane" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">
        </div>
      </div>
    </div>
  </script>

Plunker: http://plnkr.co/edit/M3MgEPY6rfGuUda2a2N7?p=preview

edited Jun 13, 2015 at 19:37

answered Jun 13, 2015 at 19:00

Numyx

1,7582 gold badges11 silver badges16 bronze badges

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

2 Comments

Body Over a year ago

Thank you very much for the answer. I would really appreciate if you could explain me above config codes by simple comment on each line.

Numyx Over a year ago

@Body Added some comments to the code, hoping it will help you to understand. Unfortunately there is (afaik) no official documentation of how to use decorators, i learned it from this article: angular-tips.com/blog/2013/09/experiment-decorating-directives .

Collectives™ on Stack Overflow

AngularJs - Adding Custom class on UI-Bootstrap's Tab

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related