ngx - Las pestañas de Bootstrap con datos alternan causa de recarga en angularjs

ng bootstrap

Question

Acabo de migrar a AngularJS 1.2. Y me di cuenta de que todos los elementos de menú / navegación configurados con datos alternan, por ejemplo:

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

no están trabajando más. Deberían alternar elemento con id = "additionalSelection" - y así es como funcionaban Angular & Bootstrap cuando estaba usando la versión 1.0.8 de Angular.

Pero ahora, cuando hago clic en el elemento de anclaje, Angular intercepta este clic e intenta ir a la ruta de selección adicional y provoca la actualización de la página ...

¿Hay alguna forma de arreglarlo?

Answer 1

Como señaló la dragonfly , data-target funciona bien en lugar de href .

Hay una pequeña diferencia en CSS. Cuando se usa data-target vs href , el cursor ya no es un puntero . Si no desea agregar CSS adicional, puede hacer lo siguiente:

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

Esto es solo una sugerencia, no una solución elegante. Pero si desea utilizar href por alguna razón, agregue onclick="return false;"

Answer 2

La solución es tan simple como reemplazar el atributo href con data-target . Eso resuelve el problema:

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

Answer 3

La solución que conserva el cursor (mientras sigue dependiendo del objetivo de datos en lugar de href para navegar) es:

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

la adición de href hace que el cursor cambie a la mano, pero dejarla en blanco como "" no causa ninguna recarga de página.

Answer 4

Simplemente reemplace el atributo href del data-target de data-target

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