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下拉切换不起作用

回答

相关问题