javascript - Angular 路由覆盖选项卡和折叠面板插件使用的 href 行为

Question

我将 twitter-bootstrap 用于选项卡和折叠面板。这两个插件都可以覆盖href。有时 - 并非始终如一，路由提供程序将覆盖选项卡/折叠行为并尝试将其用作路由。

我希望有一个解决这个问题的方法，但也将它作为一个问题添加到 github

一些解决方法实施的建议：

1. 如果 .otherwise 未提供 - 不要触摸任何未专门配置的路由。
2. 将 .ignore('path') 作为配置选项添加到 routeProvider。

Answer 1

作为一种解决方法，而不是使用 href="#targetDivId"，Twitter Bootstrap 允许data-target="#targetDivId"作为属性，这解决了我的问题。

这是描述该问题的线程：GitHub问题

Answer 2

您可以使用范围在选项卡和窗格之间连接，绕过路由：

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