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 On Tuesday, 5 February 2013 09:58:46 UTC-8, Kyle Brown wrote: > > 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 > > On Friday, October 19, 2012 3:20:24 AM UTC-7, [email protected] wrote: >> >> >> 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 >> > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
