Angularとui-routerのNavbarドロップダウンは機能しません

Question

私はこれに対して私の頭をしばらく叩いていますが、なんらかの理由で角度ui-routerを使うための簡単なブートストラップnavbarドロップダウンを手に入れることができませんui-bootstrap（最新バージョンの1.3.3）私は、UI-SREF属性を持つかどうかにかかわらず、この設定で

<div class="container"> 
    <div class="row"> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Your <img class="logo-img" src="assets/images/formio-logo-lg.png"> application.</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a ui-sref="home">Home</a></li> 
      <li><a ng-class="{active:isActive('calendar')}" ui-sref="calendar" ng-show="authenticated">Duty Shifts</a></li> 
      <li><a ng-class="{active:isActive('eventIndex')}" ui-sref="eventIndex" ng-show="authenticated">Events</a></li> 
      <li><a ng-class="{active:isActive('trainingIndex')}" ui-sref="trainingIndex" ng-show="authenticated">Training</a></li> 
      <li><a ng-class="{active:isActive('shiftIndex')}" ui-sref="shiftIndex" ng-show="authenticated">Shifts List</a></li> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a ui-sref="trainingCreate">Add Training</a></li> 
       <li><a ui-sref="eventCreate">Add Event</a></li> 
       <li><a ui-sref="shiftCreate">Add Shift</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li ng-if="authenticated"><a href="#" ng-click="logout()"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 
    </div> 
    <div id="content"> 
    <div class="row" ng-cloak> 
     <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.message}}</uib-alert> 
    </div> 
    <div ui-view></div> 
    </div> 
</div> 

、私は管理者のドロップダウンメニューを見ますが、クリックすると、何もしない：ここに私の現在のコードです。私は、ドロップダウンのためにmigration guideで提案されているすべてのもの、そのような操作を行う場合は

：

  <li uib-dropdown> 
       <a ui-sref="home" uib-dropdown-toggle uib-dropdown role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a> 
       <ul uib-dropdown-menu> 
       <li><a ui-sref="trainingCreate">Add Training</a></li> 
       <li><a ui-sref="eventCreate">Add Event</a></li> 
       <li><a ui-sref="shiftCreate">Add Shift</a></li> 
       </ul> 
      </li> 

それはまだ動作しません。私は明白な何かを見逃していると確信していますが、私は何がわかりません。私はui-navbarパッケージを見てきましたが、必要がなければ、ドロップダウンのためにすべてを再ツールする必要はありません。

私は間違っていますか？そして、はい、私はui.bootstrapとui.routerを私のアプリケーション定義に注入しました。

ありがとうございました。

Answer 1

ここはworking plunker based on your codeです。

ナビゲーションバーの内部管理ドロップダウンが次のようになります。あなたがトレーニングをクリックすると

<li class="dropdown" uib-dropdown> 
    <a class="dropdown-toggle" uib-dropdown-toggle> 
     <i class="fa fa-cogs"></i> Admin <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a ui-sref="training" ng-click='navCollapsed = true'>Add Training</a></li> 
    </ul> 
</li> 

、それは単一ページのアプリケーションなどのdiv UIビューでtraining.htmlをロードします。 ui-srefでは、ng-clickを追加してメインナビゲーションを折りたたんだことに注意してください。私はこのようなルーティングを設定

<nav class="navbar navbar-inverse " role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 

     <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'"> 

     <ul class="nav navbar-nav"> 
     <li><a ui-sref="home" ng-click='navCollapsed = true'>Home</a></li> 
     <li><a ui-sref="home" ng-click='navCollapsed = true'>Link</a></li> 
     <li class="dropdown" uib-dropdown> 
      <a class="dropdown-toggle" uib-dropdown-toggle> 
      <i class="fa fa-cogs"></i> Admin 
      <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a ui-sref="training" ng-click='navCollapsed = true'>Add Training</a></li> 
      </ul> 
     </li> 

     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    </nav> 

：

フルナビゲーションバーは次のようになります

angular.module('plunker', ['ui.router', 'ui.bootstrap']) 
.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
    .state('home', { 
     url: '/home' 
    }) 

    .state('training', { 
     url: '/training', 
     templateUrl: 'training.html', 
    }); 

    }) 

はそれが助け場合はお知らせ。ベスト。