HTML5 Zone is brought to you in partnership with:

Christian is a dedicated Open Source developer and Entrepreneur. Currently he works a lot for the Apache Software Foundation. Besides he loves efficient working and regularly shares his thoughts on his blog, mostly tagged with "Zen Programming". Christian is a DZone MVB and is not an employee of DZone and has posted 13 posts at DZone. You can read more from them at their website. View Full User Profile

Bootstrap Tabs with Angular.js

12.23.2012
| 13294 views |
  • submit to reddit

Twitter Bootstrap Tabs are a very popular feature – at least for me. I have them several times in my app. As part of my migration to Angular.js I want to use directives to switch between tabs. This has turned out so much easier than expected.

Assume this HTML code:

<ul class="nav nav-tabs">
    <li class="active"><a href="#standardNav">Standard</a></li>
    <li><a href="#quickadd">Quick Add</a></li>
</ul>
<div class="calendarNav tab-pane fade in active" id="standardNav">
    Pane 1
</div>
<div id="quickadd" class="tab-pane fade">
    Pane 2
</div>

This is some kind of basic Bootstrap Tab. In pure jQuery land you would do something like that to active the tabs:

$('.nav-tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

But with Angular.js it is recommended to write directives for all UI manipulations. Therefore I added the showtab directive to my navigation:

<ul class="nav nav-tabs">
    <li class="active"><a showtab="" href="#standardNav">Standard</a></li>
    <li><a showtab="" href="#quickadd">Quick Add</a></li>
</ul>

Note: I could have left of equality and quote symbols, but some browser might complain. I plan some backwards compatibility and so…

And finally added a new directive to my App:

var directives = angular.module('directives');
 
directives.directive('showtab',
    function () {
        return {
            link: function (scope, element, attrs) {
                element.click(function(e) {
                    e.preventDefault();
                    $(element).tab('show');
                });
            }
        };
    });

The element you have annotated with this directive will be linked to the function above. Basically I just add an click event handler to it, doing the same thing as with jQuery. Just that I use “element”, which is the link used for navigation.

Note 2: don’t try to use camel case. For example, showTab would not match to showTab in the directive. Not sure why, but if you feel your directive is not called, check if everything is lower case.Olov Lassus explained to me how to deal with camel case in Angular. It’s quite easy! Use <a show-tab ...> to map to directives.directive("showTab", …). Thanks Olov (again)!



Published at DZone with permission of Christian Grobmeier, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)