Geek Answers Handbook

Angular routing overrides href behavior used by tabs and minimize panels

I use twitter-bootstrap for tabs and minimize panels. Both of these plugins work from redefining hrefs. Sometimes - not sequentially, routereprovider redefines the behavior of tab / collapse and tries to use it as a route.

I would really like a workaround for this problem, but also added that this is a github problem

A few suggestions for using workarounds:

  • Unless otherwise provided - do not touch the route, which is not specially configured.
  • add the .ignore ('path') parameter to routeProvider as a configuration parameter.
+8
javascript angularjs twitter-bootstrap
source share
2 answers

As a workaround, instead of using href="#targetDivId" , Twitter Bootstrap allows data-target="#targetDivId" as the attribute that solved my problem.

Here's a thread describing the problem: GitHub issue

+21
source share

You can use the area to connect between the tabs and the panel, bypassing the route:

 <div class="tabbable"> <ul class="nav nav-tabs"> <li ng-class="{'active':currentTab == 'Tab1'}"> <a data-toggle="tab" ng-click="currentTab = 'Tab1'">Tab1</a> </li> <li ng-class="{'active':currentTab== 'Tab2'}"> <a data-toggle="tab" ng-click="currentTab = 'Tab2'">Tab2</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" ng-class="{'active':currentTab == 'Tab1'}" id="Tab1"> <p>I'm in Section 1.</p> </div> <div class="tab-pane" ng-class="{'active':currentTab == 'Tab2'}" id="Tab2"> <p>Howdy, I'm in Section 2.</p> </div> </div> </div>
+2
source share

More articles:


All Articles