Problemas com AngularJS e componente tab original do Bootstrap ou jQueryUI

Muitos que usam o componente tab original do bootstrap 3 ou do jQueryUI junto com o Angular.js com versão superior a 1.0.8, devem ter percebido que o sistema de $location do angular entender o clique em tabs como uma mudança de endereço de url e por isto encaminha a requisição conforme seu mapeamento de rotas 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>

Outras informações semelhantes, veja no artigo AngularJS 1.2 e Bootstrap 3 tabs.

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

Artigos relacionados:

AngularJS 1.2 e Bootstrap 3 tabs Dica de como acompanhar a evolução do Angular.js AngularJS – Evento de mudança de url / rota / location Angular.js – Versão 1.4 lançada Lançado AngularJS 1.3.x Incompatibilidade entre o Twitter-bootstrap e o Google Maps Evitando uso de variáveis globais em sistemas utilizando AngularJs Melhorias de performances manuais com o AngularJs – $timeout Melhorias de performances manuais com novos recursos do AngularJs >=1.3 – Bind