Нажатие на вкладку контента на другую страницу с помощью AngularJS

Question

У меня есть следующее состояние с использованием модуля angular-ui-router, и в настоящее время у меня есть адрес http://localhost:3000/#/bar/87023/, где 87023 - значение a.

.state('foo', { 
    url: '/bar/:a/:b', 
    views: { 
     '': { 
      templateUrl: 'partials/zoo.tpl.html', 
      controller: 'XCtrl' 
     }, 

     'purr@foo': { 
      templateUrl: 'partials/zing.html', 
      controller: 'YCtrl' 
     } 
    } 
}) 

На zing.html странице у меня есть 4 вкладки следующим образом:

<ul class="nav nav-tabs"> 
    <li> 
     <a href="#tab_1_1" data-toggle="tab"> 
      Zoo Details </a> 
    </li> 
    <li> 
     <a href="#tab_1_2" data-toggle="tab"> 
      Pricing </a> 
    </li> 
    <li class="dropdown"> 
     <a href="#tab_1_3" data-toggle="tab"> 
      Reviews </a> 
    </li> 
    <li> 
     <a href="#tab_1_4" data-toggle="tab"> 
      Something interesting </a> 
    </li> 
</ul> 
<div class="tab-content"> 
      <div id="tab_1_1"> 
       //tab_1_1 content 
      </div>     
      <div id="tab_1_2"> 
       //tab_1_2 content 
      </div> 
      <div id="tab_1_3" > 
       //tab_1_3 content 
      </div>    
      <div id="tab_1_4" > 
       //tab_1_4 content 
      </div> 
</div> 

Когда я нажимаю на tab_1_1 или любой из вкладок, я принят к http://localhost:3000/#/ странице. Может ли кто-нибудь помочь мне понять, почему у меня есть эта проблема и как ее решить? Я хочу быть на одной странице (http://localhost:3000/#/bar/87023/) и иметь возможность видеть содержимое вкладок.

Answer 1

Вы перенаправляетесь на индекс, потому что атрибут атрибута изменяет хэш браузера, который прослушивается ngRoute angularJS.

Используйте data-target атрибут вместо href

Вот пример на jsFiddle