javascript - 使用 AngularJS 单击内容选项卡路由到不同页面

Question

我使用 angular-ui-router 模块处于以下状态，并且当前位于 URL 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

您正在重定向到索引，因为 href 属性更改了浏览器的哈希值，该哈希值由 angularJS 的 ngRoute 监听。

使用data-target属性而不是href

这是 jsFiddle 的示例