Question

我使用Bootstrap nav-tabs。通过下面的示例，如果网页的网址为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控制器中，我添加了：

$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>

Bootstrap nav-tabs当URL内容àid（＃/ mypage /：id）时

1 个答案: