Over a million developers have joined DZone.
Platinum Partner

Bootstrap Tabs with Angular.js

· Web Dev Zone

The Web Dev Zone is brought to you by Stormpath—offering a pre-built Identity API for developers. Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management.

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>
<div class="calendarNav tab-pane fade in active" id="standardNav">
    Pane 1
<div id="quickadd" class="tab-pane fade">
    Pane 2

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) {

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>

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');
    function () {
        return {
            link: function (scope, element, attrs) {
                element.click(function(e) {

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)!

The Web Dev Zone is brought to you by Stormpath—offering a pre-built, streamlined User Management API for building web and mobile applications. Plan On Building User Management? Buy It Instead. Download Our White Paper To Learn More.


Published at DZone with permission of Christian Grobmeier , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}