2014-02-23 85 views
4

我在我的angularjs項目中使用了bootstrap 3下拉菜單,一切似乎都正常,但使用角度ui bootstrap(angular-ui-bootstrap.min。 js)bootstrap 3下拉菜單不起作用(意思是它沒有打開)。有沒有人有同樣的問題?請幫助我解決這個問題。Bootstrap 3下拉菜單在使用AngularJS UI時不起作用引導

的Index.html

<ul class="nav nav-list"> 
       <li> 
        <a href="index.html"> 
         <i class="icon-dashboard"></i> 
         <span class="menu-text"> Dashboard </span> 
        </a> 
       </li> 

       <li> 
        <a href="#" class="dropdown-toggle"> 
         <i class="icon-building"></i> 
         <span class="menu-text"> Projects </span> 

         <b class="arrow icon-angle-down"></b> 
        </a> 

        <ul class="submenu"> 
         <li> 
          <a href="#"> 
           <i class="icon-double-angle-right"></i> 
           Find Project 
          </a> 
         </li> 

         <li> 
          <a href="#"> 
           <i class="icon-double-angle-right"></i> 
           Create Project 
          </a> 
         </li> 

         <li> 
          <a href="#"> 
           <i class="icon-double-angle-right"></i> 
           Update Project 
          </a> 
         </li>  

        </ul> 
       </li> 
<ul> 

回答

1

你需要做的Angularjs方式:

確保包括:

指數:

<ul class="nav nav-list"> 
    <li> 
     <a href="index.html"> 
     <i class="icon-dashboard"></i> 
     <span class="menu-text"> Dashboard </span> 
     </a> 
    </li> 
    <li class="dropdown" ng-controller="DropdownCtrl"> 
     <a class="dropdown-toggle"> 
     <i class="icon-building"></i> 
     <span class="menu-text"> Projects </span> 
     <b class="arrow icon-angle-down"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <li ng-repeat="choice in items"> 
      <i class="icon-double-angle-right"></i> 
      <a>{{choice}}</a> 
      </li> 
     </ul> 
    </li> 
<ul> 

JS:

angular.module('plunker', ['ui.bootstrap']); 
function DropdownCtrl($scope) { 
    $scope.items = [ 
    "Find Project", 
    "Create Project", 
    "Update Project" 
    ]; 
}