Bootstrap nav-tabs Когда содержимое URL à id (#/mypage /: id)

Question

Я использую Bootstrap nav-tabs. В примере ниже у меня нет проблем, если URL страницы, является mypage

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

, но я должен иметь идентификатор параметра

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