AngularJS ui-srefがnavbarのドロップダウンで動作しない

Question

navbarのための角度とブートストラップにUI-Routerを使用しています。ドロップダウン内でアンカーをクリック可能にしていますが、モバイルでは動作しません。私はui-sref not working in bootstrap dropdownを見て、解決策は私のために働いていません。私はコンソールで何のエラーも出ない。

HTML：

​​

参考注文：

<script src="bower_components/jquery.slimscroll/jquery.slimscroll.min.js"></script> 
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script> 
<script src="bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js"></script> 
<script src="bower_components/select2/dist/js/select2.min.js"></script> 
<script src="bower_components/angular/angular.min.js"></script> 
<script src="bower_components/angular-animate/angular-animate.min.js"></script> 
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script> 
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script> 
<script src="bower_components/angular-messages/angular-messages.min.js"></script> 
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script> 
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
<script src="bower_components/angular-bootstrap-toggle/dist/angular-bootstrap-toggle.min.js"></script> 
<script src="dist/app.min.js"></script> 

JS：UI-ルータの設定：

var app = angular.module('accountsMod'); 
app.config(function routeConfig ($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise("/login"); 

$stateProvider 
    .state('auth.add', { 
     url: '/accounts/add', 
     controller: 'AccountController', 
     templateUrl: 'app/components/account/add.html' 
    }) 
    .state('auth.list', { 
     url: '/accounts/add', 
     controller: 'AccountController', 
     templateUrl: 'app/components/account/list.html' 
    }) 

}

問題の焦点は次のとおりです。携帯電話のブートストラップによって提供されるレスポンデッドデザインに従って、ナビゲーションバーのこれらのアンカーに触れると、メニューが閉じて何も起こりません。

Answer 1

一つの解決策：私は「角度-UI-ブートストラップ」パッケージをインストールする必要がありましたし、次のようにいくつかの変更でした：

1. は、ディレクティブに参照： var app = angular.module('accountsMod',['ui.router', 'ui.bootstrap']);
2. は、次のようにトグルメニューの各htmlタグを置き換えます（コメントの古い程度）：

HTML： ` トグルナビゲーション

<nav class="mainnav-collapse collapse" role="navigation" aria-expanded="false" style="height: 0px;"> 
    <ul class="mainnav-menu"> 
    <li uib-dropdown> <!--OLD: <li class="dropdown">--> 
     <a uib-dropdown-toggle> <!--OLD:<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">--> 
     Links<i class="mainnav-caret"></i> 
     </a> 
     <ul uib-dropdown-menu><!--OLD: <ul class="dropdown-menu" role="menu">--> 
     <li> 
      <a ui-sref="auth.add()"> 
      <i class="fa fa-users dropdown-icon" aria-hidden="true"></i> 
      Link 1 
      </a> 
     </li> 

     <li> 
      <a ui-sref="auth.list()"> 
      <i class="fa fa-history dropdown-icon" aria-hidden="true"></i> 
      Link 2 
      </a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

`

のでUI-SREF linksはモバイルナビゲーションで仕事を始めました！ Tks！