angularjs bootstrap tabs using

Question

I want to achieve bootstrap tabs like in this example, using angularjs bootstrap - It contains directives tabbable and tabPane. It doesn't work, i have no idea how to get the ball rolling.

<tabbable>
    <tabPane title="first">
        <div ng-controller="FirstCtrl"></div>
    </tabPane>
    <tabPane title="tabbable">
        <div ng-controller="SecondCtrl"></div>
    </tabPane>
</tabbable>

app.js:

angular.module('orders_manage', ['orders_manage.services', 'bootstrap'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

$routeProvider
    .when('/first', { templateUrl:'/partials/first.html', controller:FirstCtrl})
    .when('/second', { templateUrl:'/partials/second.html', controller:SecondCtrl})

Here is the version from jsFiddle updated to 1.0.1: jsfiddle.net/pkozlowski_opensource/HaN7d/1 it works fine. I'm a bit confused about what you are trying to do: make the version from the fiddle work? Or the one from angular work? If you are after making the angular one working, what is the problem you are facing? Could you send a jsFiddle exposing the problem? — pkozlowski.opensource
– pkozlowski.opensource, Commented Sep 3, 2012 at 19:38

tilgovi · Accepted Answer · 2012-12-06 00:55:36Z

4

If you take a look at the source you'll find that these directives are restricted to class names: https://github.com/angular/angular.js/blob/v1.0.x/src/bootstrap/bootstrap.js#L54

Rewriting your example to use <div class="tabbable"> and <div class="tab-pane"> will fix the issue.

answered Dec 6, 2012 at 0:55

tilgovi

3262 silver badges12 bronze badges

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

Comments

Kevin Ortman · Accepted Answer · 2012-12-30 19:14:11Z

1

This plunk shows an example of what you are looking for. Original link found on the angularjs JsFiddle-Examples wiki .

Angular Bootstrap Tabbable with ng-view and url as current tab deep linking (Andy Joslin)

Also, depending on your use case, you may want to take a look at the Create Components section on the angularjs home page http://angularjs.org . The 'component.js' source code in that section shows example code to quickly get tabs working without angularjs bootstrap. You can use this example to build a custom solution if you need more control over the functionality.

edited Dec 30, 2012 at 19:14

answered Dec 30, 2012 at 19:06

Kevin Ortman

1,92914 silver badges16 bronze badges

Collectives™ on Stack Overflow

angularjs bootstrap tabs using

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related