Angular Bootstrap下拉切換不起作用

我有一個Angular Bootstrap下拉菜單，似乎沒有切換下拉菜單。點擊後，什麼也沒有顯示，儘管我可以看到檢查元素上的列表項。Angular Bootstrap下拉切換不起作用

HTML：

 <div ng-controller="DropdownCtrl"> 
      <!-- Simple dropdown --> 
      <span class="dropdown" dropdown on-toggle="toggled(open)"> 
       <a href class="dropdown-toggle {{ disableDropdown }}" dropdown-toggle> 
       <i class="fa fa-align-justify"></i> 
       </a> 
       <ul class="dropdown-menu port-dropdown-menu"> 
       <li>test</li> 
       <li>test2</li> 
       <li ng-repeat="choice in dropdown.items"> 
        <a ui-sref="portfolio.port({portId: choice.id})">{{ choice.title }}</a> 
       </li> 
       </ul> 
      </span> 
     </div>

DropdownCtrl：

'use strict'; 

angular.module('portfolioManager').controller('DropdownCtrl', function ($scope,   portfolioCreateService) { 

$scope.dropdown = {}; 

$scope.dropdown.items = portfolioCreateService.getDropdownTabs(); 

$scope.disableDropdown = portfolioCreateService.getDropdownClass(); 

$scope.$on('dropdownStatus', function(){ 
    $scope.disableDropdown = portfolioCreateService.getDropdownClass(); 
    console.log($scope.dropdown.items); 
}); 

$scope.status = { 
    isopen: false 
}; 

$scope.toggled = function(open) { 
    $log.log('Dropdown is now: ', open); 
}; 

$scope.toggleDropdown = function($event) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 
    $scope.status.isopen = !$scope.status.isopen; 
};

}）;

來源

2014-12-05 Daniel Bogart

你能提供一個jsfidldle嗎？我認爲用ng-show更容易實現你想要的。 – 2014-12-05 18:34:00

下拉菜單是大型生產應用程序中相當複雜的模塊的一部分，所以我不確定jsfiddle是否準確或有用。 – 2014-12-05 20:31:31

是否會記錄日誌，即「切換」（打開）''被調用？ – mido 2014-12-29 16:56:02

我使用的角度低於1.3.0，然後<a href class="dropdown-toggle {{ disableDropdown }}" dropdown-toggle>綁定兩個下拉開關指令。然後當你點擊這個元素時，第一條指令打開下拉菜單，然後第二條指令立即關閉它。

從元素中刪除屬性dropdown-toggle它應該工作。

來源

2015-01-20 10:44:20 kvetis

我也遇到過Original Bootstrap下拉的問題（也導入了Angularjs UI Bootstrap），但是它像這樣：當我在導航欄中使用它時，只有2次點擊觸發下拉菜單，就像Bootstrap中的演示官方網頁。例如：

<ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     <li class="divider"></li> 
     <li><a href="#">One more separated link</a></li> 
     </ul> 
    </li> 
    </ul>

後，才取出data-toggle="dropdown"，將原始引導下拉菜單中的導航欄運行良好......也許是因爲data-toggle="dropdown"也會讓Angularjs UI引導結合下拉菜單，切換指令。

來源

2015-03-04 16:00:33

Angular Bootstrap下拉切換不起作用

回答

相關問題