AngularJS 1.2 e Bootstrap 3 tabs

Muitos que usam o componente tab original do bootstrap 3 e atualizaram o Angular.js da versão 1.0.x para 1.2.0, devem ter percebido que o sistema de $location do angular passou a entender o clique em tabs como uma mudança de endereço de url e passou a encaminhar a mesma segundo seu mapeamento interno.

Para evitar este problema, assim como em qualquer parte do sistema fazer o $location do angular desprezar o clique de elementos <a, basta adicionar o seguinte atributo ao elemento target="_self":

<!-- Será redirecionado para o url base/#devblog pelo Angular.js -->
<a href="#devblog" data-toggle="tab">DevBlog da Drall</a>
<!-- Será utilizada pelo tab do bootstrap-->
<a href="#blog" target="_self" data-toggle="tab">Blog da Drall</a>

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados:

Problemas com AngularJS e componente tab original do Bootstrap ou jQueryUI Incompatibilidade entre o Twitter-bootstrap e o Google Maps Lançado AngularJS 1.3.x AngularJS – Evento de mudança de url / rota / location Adicionando borda a elemento div dimensionado com span em Twitter Bootstrap Melhorias de performances manuais com o AngularJs – $timeout Bootstrap 3, max-width e projetos com width igual a 100% Evitando uso de variáveis globais em sistemas utilizando AngularJs Acessar o scope de um elemento externamente a seu controller em AngularJS