uib-dropdownがnavbarで機能しない

私はnavbarに単純なドロップダウンナビゲーションを追加しようとしていますが、uib-dropdownディレクティブを使用すると、メインナビゲーションの下にドロップダウンリストが表示されます。このタイプの実装のためのドキュメントには例はありませんが、かなり簡単なはずです。uib-dropdownがnavbarで機能しない

ここには、動作とマイコードを示すplnkrがあります。

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#/home">angular-gmap-gplace</a> 
    </div> 

    <ul class="nav navbar-nav pull-right"> 
     <li class="active" uib-dropdown> 
     <a id="dDrop" uib-dropdown-toggle>Directive<span class="caret"></span></a>           
     <ul uib-dropdown-menu role="menu" aria-labelledby="dDrop"> 
      <li role="menuitem"> 
      <a href="#">Multiple</a> 
      </li> 
     </ul> 
     </li> 
    </ul> 

    </div> 
</nav>

出典

2016-05-18 Grant Jordan

ng-app属性を追加するだけでなく、ui.bootstrapモジュールをアプリケーションモジュールに追加する必要があります。私はあなたのプランカーをフォークし、script.jsファイルに小さな変更を加えました。私はまた、index.htmlを plunker

<body ng-app='app'> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#/home">angular-gmap-gplace</a> 
    </div> 

    <ul class="nav navbar-nav pull-right"> 
     <li class="active" uib-dropdown> 
     <a id="dDrop" uib-dropdown-toggle>Directive           <span class="caret"></span> 
     </a> 
     <ul uib-dropdown-menu role="menu" aria-labelledby="dDrop"> 
      <li role="menuitem"> 
      <a href="#">Multiple</a> 
      </li> 
     </ul> 
     </li> 
    </ul> 

    </div> 
</nav> 

<h1>uib-dropdown in navbar</h1>

script.js 
angular.module('app',['ui.bootstrap']);

にNG-アプリ属性を追加しました

出典

2016-06-01 03:06:31 Bradley

uib-dropdownがnavbarで機能しない

答えて

関連する問題