Bootstrap Dropdown прокрутка вдоль Angular Routing

Question

Я создаю сайт, который использует бутстрап, а также угловой. Я использую угловую маршрутизацию и загрузку пользовательских представлений на индексной странице по мере необходимости. Проблема, с которой я сталкиваюсь, заключается в том, что из-за маршрутизации выпадающее меню в заголовке перестало работать. Вот код заголовка:

<nav class="col-lg-12 col-md-12 col-sm-12 col-xs-12 navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <div uib-dropdown> 
        <a href="#side" class="btn btn-default btn-primary navbar-toggle pull-left" data-toggle="collapse" data-target="side" uib-dropdown-toggle> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </a> 
       </div> 
       <a class="navbar-brand" href="#/">Company Logo</a> 
      </div> 
      <ul id="side" class="nav navbar-nav collapse hidden-lg hidden-md hidden-sm" uib-dropdown-menu> 
       <li><a href="#/">Home</a></li> 
       <li><a href="#/stuff">Stuff</a></li> 
       <li><a href="#/list">List Example</a></li> 
       <li><a href="#/contact">Contacts</a></li> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"> </span> </a> 
        <ul class="dropdown-menu"> 
         <li><a href="#/">Profile</a></li> 
         <li><a href="#/">Logout</a></li> 
        </ul> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right hidden-xs"> 
       <li class="dropdown"><a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"> </span> </a> 
        <ul class="dropdown-menu"> 
         <li><a href="#/">Profile</a></li> 
         <li><a href="#/">Logout</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav> 

Перед маршрутизации, нажав на кнопку переключения (отображается на маленьких экранах только) будет ссылаться на ул чей идентификатор «сторона» и показать, что в раскрывающемся списке. Но теперь, когда была настроена маршрутизация URL-адресов, нажатие на кнопку переключения изменяет URL-адрес на #/side. Я не хочу, чтобы это произошло, потому что нет URL #/стороны, и таким образом раскрывающийся список не открывается.
Я пробовал использовать location.hash() и $ anchorScroll, но это не сработало. Включение атрибутов углового ui (например, uib-dropdown, uib-dropdown-menu и т. Д.) Изменило поведение кнопки переключения, так что теперь ее можно щелкнуть. Меню не открывается.

Может кто-нибудь объяснить, что я должен сделать, чтобы заставить это работать? Помощь будет оценена!

EDIT Вот несколько скриншотов, чтобы показать вам, что я имею в виду:

Что я могу сделать, чтобы предотвратить это?

Answer 1

Так это то, что я сделал, чтобы исправить эту проблему (спасибо за помощь Mandeep Singh):

В app.js файла, в котором маршрутизация настроенные, я добавил следующий фрагмент:

.otherwise({ 
     redirectTo: '/' 
    }); 

, чтобы убедиться, что всякий раз, когда нажимается кнопка переключения, URL-адрес не перенаправляется, чтобы показывать идентификатор кнопки. теперь, когда кнопка с «стороной» id нажата для переключения выпадающего списка, URL остается неизменным.
Кроме этого, я не связывал bootstrap.js и jquery с моим файлом index.html. Это также вызывало проблемы.
Последняя вещь, которую я сделал, чтобы использовать пользовательский интерфейс Bootstrap с тегами (See detail about this here)