带有数据切换的Bootstrap选项卡会导致以angularjs的forms重新加载

我刚刚迁移到AngularJS 1.2。 而且我意识到,所有configuration了数据切换的菜单/导航元素,例如:

<li><a href="#additionalSelection" data-toggle="tab">Additional Selection</a></li> 

不再工作了。 他们应该用id =“additionalSelection”切换元素 – 这就是当我使用Angular 1.0.8版本时Angular&Bootstrap的工作原理。

但是现在,当我点击锚点元素时,Angular截获了这个点击并尝试去路由additionalSelection并且导致页面刷新…

有没有办法解决它?

解决scheme就像用data-targetreplacehref属性一样简单。 解决了这个问题:

 <li><a data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li> 

正如dragonfly指出的, data-target工作正常,而不是href

CSS有一个小的差异。 当使用数据目标 vs href时 ,游标不再是指针 。 如果您不想添加额外的CSS,则可以执行以下操作:

 <a href="#additionalSelection" data-toggle="tab" onclick="return false;">Selection</a> 

这只是一个build议,而不是一个优雅的解决scheme。 但是,如果你想使用href出于某种原因,添加onclick="return false;"

只需从data-targetreplacehref属性即可

 <li><a data-target="#switchTabs" data-toggle="tab">Tabs</a></li> 

保留游标的解决scheme(仍然依靠数据目标而不是href来导航)是:

 <li><a href="" data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li> 

添加href会导致光标切换到手,但保留空白为“”不会导致任何页面重新加载。