Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Bootstrap Tabs with Angular.js

DZone's Guide to

Bootstrap Tabs with Angular.js

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

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



Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}