应用 Angular Bootstrap 下拉菜单示例

Question

我想在项目中添加下拉菜单，我从示例中复制了代码。下拉菜单出现与示例中相同，但是当我点击它时没有任何反应。

<form class="form" name="form"  novalidate>
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button"
            class="btn btn-primary dropdown-toggle"
            dropdown-toggle
            ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="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>
    </ul>
  </div>
  <div>
</form>   

现在这个HTML的控制器：

angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
    $scope.items = [
        'The first choice!',
        'And another choice for you.',
        'but wait! A third!'
    ];

    $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;
    };
});

- rashadb

---

你正在使用哪个Bootstrap/AngularJS集成库？ - cvrebert

我正在使用Angular Fullstack。在客户端中，有一个bower_components文件夹，其中包含一个名为angular-bootsrap的文件夹，其中包含一个ui-bootstrap.js文件，听起来与演示代码中的文件一样。该示例在此处找到：http://angular-ui.github.io/bootstrap/ - rashadb

是的，有什么问题吗？我的意思是那是正确的库，对吧？ - rashadb

没问题。已添加相关标签。 - cvrebert

那么为什么下拉菜单不起作用？ - rashadb

Answer 1

我曾遇到同样的问题，通过删除dropdown-toggle这一行代码解决了问题。

虽然我不知道具体问题出在哪里，但是这种方法确实有效。

下面是我所采用的方法：

    <!-- Single button -->
    <div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="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>
      </ul>
    </div>

以下是没有使用dropdown-toggle代码：

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="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>
  </ul>
</div>

编辑：

以上示例适用于使用 angular-ui-bootstrap 的版本: 0.10.0

现在我已经更改了 ui-bootstrap，使用的是以下版本：

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

现在一切都像魔术一样顺利运行。

- Jorge Casariego

---

谢谢。这对我也起作用了，版本是0.10.0。 - cjackson

对我来说，解决方案恰恰相反：我需要确保按钮具有dropdown-toggle属性，父级div具有dropdown属性，否则按钮就毫无效果。 - Micros

如果您正在使用版本0.14.3，则必须将uib-dropdown和uib-dropdown-toggle用作属性。 - colossatr0n

Answer 2

您的代码存在几个问题：

您的HTML无效，最后一个<div>标签不应该出现

<form class="form" name="form" novalidate>
    <div class="btn-group" dropdown is-open="status.isopen">
        <button type="button"
                class="btn btn-primary dropdown-toggle"
                dropdown-toggle
                ng-disabled="disabled">
            Button dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="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>
        </ul>
    </div>
</form>

您没有将 ui.bootstrap 作为模块依赖项进行引用

angular.module('startupApp', [
    'ui.bootstrap'
])

你是否已经包含了正确的文件？

• AngularJS
• Angular UI Bootstrap
• Bootstrap CSS

在你的控制器中不需要任何特殊操作，dropdown和dropdown-toggle指令是自给自足的。

JsFiddle演示

- Florian F.

---

我修复了HTML错误，但没有任何变化。我使用的Angular Fullstack正如上面所示，具有ui.bootstrap作为依赖项，只是在我的应用程序文件中。我不确定您所说的“包括正确的文件”是什么意思。当我使用Yeoman/Bower设置种子时，我选择了bootstrap和ui-bootstrap作为依赖项。因此，我有了angular、angular-bootstrap、bootstrap、bootstrap-sass-official等文件夹。 - rashadb

那么请尝试在 JsFiddle 中重现它，否则我将无法提供更多帮助。 - Florian F.

Answer 3

首先，我要感谢Jorge Casariego对他的回答的支持。他的回答帮助了我很多。

然而，在最后还有一个问题，那就是当有人与下拉菜单交互（在这里可以看到示例）时，既没有调用$scope.toggled = function(open) {...}，也没有调用$scope.toggleDropdown = function($event) {...}。在查看了ui-bootstrap-tpls-0.10.0.js代码后，我不得不进一步调整HTML代码：

• dropdown属性应该是一个类值，而不是一个属性本身。
• is-open=...不是必需的，ui-bootstrap会自动处理它。
• 将<a>元素上附加一个ng-click事件。

dropdown作为一个属性时，对我来说这个方法没有起作用。

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle"
   ng-disabled="disabled">
    Choose category <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="category in interactions">
      <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
       {{category.displayName}}
      </a>
    </li>
  </ul>
</div>

但这样做确实（将 dropdown 添加为类值）：

<!-- Single button -->
<div class="btn-group dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle"
   ng-disabled="disabled">
    Choose category <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="category in interactions">
      <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
       {{category.displayName}}
      </a>
    </li>
  </ul>
</div>

我的 Angular 应用程序的其余部分如下：

$scope.toggleDropdown = function($event) {
  $event.preventDefault();
  console.log('This is your event now: ', $event);
};

我知道angular-ui-bootstrap有更新的版本可用，但为了记录，我在这里放置它。它可以与0.10.0版本一起使用。

- natterstefan

Answer 4

经过长时间的努力，我终于找到了适用于我的情况的答案。我只需要将parse-angular添加到我的angular.module('myapp'['parse-angular'])中即可。

- rashadb