Over a million developers have joined DZone.

Bootstrap Tabs with Angular.js

DZone's Guide to

Bootstrap Tabs with Angular.js

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Published at DZone with permission of Christian Grobmeier, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


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

{{ parent.tldr }}

{{ parent.urlSource.name }}