Bootstrap tabs are not working properly with angularjs

15,038 views
Skip to first unread message

mail2ar...@gmail.com

unread,
Oct 19, 2012, 6:20:23 AM10/19/12
to ang...@googlegroups.com


 Hi,

 I'm just developing an application with angular and nodejs. In my register form, i have used bootstrap tabs (pills), which has form fields. I have to double-click to show the content of next tab.  Due to this data entered in the first tabs is lost on selecting the second or subsequent tabs(I have double click the tabs to show). Can someone point out the issue here?

Note: If i use the same in normal html, it works fine. The issue arises when used with angularjs

  Env:
   Latest Bootstrap , jquery (1.8.2), angular(1.0.1)

app.js
==========
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/view1', {templateUrl: '/partials/partial1.html', controller: MyCtrl1});
    $routeProvider.when('/view2', {templateUrl: '/partials/partial2.html', controller: MyCtrl2});
    $routeProvider.when('/posts', {templateUrl: '/partials/posts.html', controller: PostController});
    $routeProvider.when('/register', {templateUrl: '/partials/register.html', controller: RegisterController});
    $routeProvider.when('/search', {templateUrl: '/partials/search.html', controller: SearchController});
    $routeProvider.otherwise({redirectTo: '/view1'});
    $locationProvider.html5Mode(true);
  }]);


index.html
==========

<html ng-app="myApp">
<head>
  <link   href="css/bootstrap.min.css" rel="stylesheet">
  <link   href="css/bootstrap-responsive.min.css" rel="stylesheet">
  <script src="js/lib/jquery/jquery-latest.js"></script>
  <script src="js/lib/bootstrap/bootstrap.min.js"></script>
  <script src="js/lib/angular/angular.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</head>
<body>
  <div ng-view> </div>
</body>
</html>


I have attached the screenshots of single and double click of the tabs.



Thanks,
Arun
reg_single_clik.png
reg_dblclick.png

Kyle Brown

unread,
Feb 5, 2013, 12:58:46 PM2/5/13
to ang...@googlegroups.com, mail2ar...@gmail.com
Hi,

You didn't seem to include the partials source (where the tabs markup appears to be) so its difficult to diagnose. However I experienced the same issue you have. The way I fixed it was omitting the href on the nav anchors (so that angularjs does an automatic preventDefault()) and use the bootstrap tab data-target attribute instead:

<ul class="nav nav-tabs">
    <li class="active">
        <a data-target="#tab-one" data-toggle="tab">Tab One</a>
    </li>
    <li>
        <a data-target="#tab-two" data-toggle="tab">Tab Two</a>
    </li>
</ul>

<div class="tab-content">
    <div id="tab-one" class="tab-pane active">
        <h2>Tab 1</h2>
    </div>
    <div id="tab-two" class="tab-pane">
        <h2>Tab 2</h2>
    </div>
</div>


--Kyle 

Florian Orben

unread,
Feb 5, 2013, 1:15:22 PM2/5/13
to ang...@googlegroups.com, mail2ar...@gmail.com
Hi there,

actually I think there isn't even a need to do this with bootstap tabs, you can build a tabble ui quite easily with angular:

- Flo

Adam Grant

unread,
Jan 15, 2014, 1:33:00 PM1/15/14
to ang...@googlegroups.com, mail2ar...@gmail.com
Thanks Boss, this solved my problem! What's odd is that the function for adding/removing classes was executing, but the class modification on the tab elements wasn't always getting applied. Some odd JS trickery, mayhaps...

- Adam

Damir Vazgird

unread,
Jan 15, 2014, 2:06:48 PM1/15/14
to ang...@googlegroups.com, mail2ar...@gmail.com
Hey, even though you resolved the issue.

You can also use bootstrap.ui to create bootstrap tabs with angular.


Heres a link to the tabs example: http://plnkr.co/edit/?p=preview

Adam Grant

unread,
Jan 15, 2014, 2:30:14 PM1/15/14
to ang...@googlegroups.com
Awesome, I'll check it out, thanks!

- Adam

A n d r e w Ferguson

unread,
Jul 8, 2014, 12:38:43 AM7/8/14
to ang...@googlegroups.com
Thank you to everyone who contributed. I found it all very useful.

aj...@ceylonit.com

unread,
Oct 13, 2015, 10:43:23 AM10/13/15
to AngularJS, mail2ar...@gmail.com
thanks bro great..
Reply all
Reply to author
Forward
0 new messages