點擊內容標籤路由到與AngularJS不同頁面

我有以下狀態使用angular-ui-router模塊，我目前在http://localhost:3000/#/bar/87023/的網址是a的值。點擊內容標籤路由到與AngularJS不同頁面

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

     '[email protected]': { 
      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/）並能夠看到選項卡的內容。

來源

2014-09-30 skip

您正在重定向到索引，因爲href屬性會更改由angularJS的ngRoute偵聽的瀏覽器的哈希值。

使用data-target屬性，而不是href

這裏有jsFiddle

來源

2014-09-30 20:17:32

工程就像一個魅力，非常感謝一個例子。它有可能也顯示光標指向文本？就像當它在文本週圍顯示時那樣，而在標籤內顯示時？ – skip 2014-09-30 20:27:11

是的，在你的css中添加'a [data-target] {cursor：pointer;}' – 2014-09-30 20:29:58

儘可能甜，謝謝:) – skip 2014-09-30 20:33:34

點擊內容標籤路由到與AngularJS不同頁面

回答

相關問題