javascript - Bootstrap nav-tabs 当 URL 内容 à id (#/mypage/:id)

Question

我使用 Bootstrap nav-tabs。对于下面的示例，如果页面的 URL 是 mypage

，我没有问题

($stateProvider.state('ide', {url: '/mypage',...)

但我必须有一个 id 参数

($stateProvider.state('ide', {url: '/mypage/:id',...)

这不再有效。我被重定向到该网站的主页。您知道如何更改我的代码以使其正常工作吗？

<div>
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tab1" data-toggle="tab">Tab 1</a>
        </li>
        <li class="">
            <a href="#tab2" data-toggle="tab">Tab 2</a>
        </li>
        <li class="">
            <a href="#tab3" data-toggle="tab">Tab 3</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="active tab-pane fade in" id="tab1">
            <div id="editorA"></div>
        </div>
        <div class="tab-pane fade in" id="tab2">
            <div id="editorB"></div>
        </div>
        <div class="tab-pane fade in" id="tab3">
            <div id="editorC"></div>
        </div>
    </div>
</div>

我的链接转到http://localhost:8080/#/mypage#tab2而不是http://localhost:8080/#/mypage/1063#tab2

Answer 1

我找到了解决方案:

在我的 AngularJS Controller 中添加:

$scope.keepId=id;

在我的 HTML 页面中，我在链接中添加 #/mypage/{{keepId}}:

<div>
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#/mypage/{{keepId}}#tab1" data-toggle="tab">Tab 1</a>
        </li>
        <li class="">
            <a href="#/mypage/{{keepId}}#tab2" data-toggle="tab">Tab 2</a>
        </li>
        <li class="">
            <a href="#/mypage/{{keepId}}#tab3" data-toggle="tab">Tab 3</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="active tab-pane fade in" id="tab1">
            <div id="editorA"></div>
        </div>
        <div class="tab-pane fade in" id="tab2">
            <div id="editorB"></div>
        </div>
        <div class="tab-pane fade in" id="tab3">
            <div id="editorC"></div>
        </div>
    </div>
</div>