2

我有一个 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>

下拉控件：

'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;
};

});

4

2 回答 2

1

我您使用的 angular 版本低于 1.3.0，然后<a href class="dropdown-toggle {{ disableDropdown }}" dropdown-toggle>绑定两个下拉切换指令。然后，当您单击元素时，第一个指令会打开下拉菜单，然后第二个指令会立即将其关闭。

dropdown-toggle从元素中删除属性，它应该可以工作。

于 2015-01-20T10:44:20.317 回答
0

我也遇到了 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 Bootstrap 绑定下拉切换指令。

于 2015-03-04T16:00:33.853 回答