angular bootstrap dropdown error: d.init is not a function

Question

我正在尝试对 angular (https://angular-ui.github.io/bootstrap/#/dropdown) 使用 UI Bootstrap 下拉指令。

我正在复制页面上的示例（对于单个按钮），但出现此错误：

TypeError: d.init is not a function

这是标记：

<div class="album-selector col-sm-12" ng-controller="DropdownController">
  <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>
  </div>
  <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.module('DropdownCtrl', ['ui.bootstrap']).controller('DropdownController', function ($scope) {

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

注意： 似乎 'd.init' 错误只是通过在 div 上（或文档上的任何位置）写入 'dropdown' 发生, 删除该指令会使错误消失，但下拉菜单仍然不起作用。

注意 2： 我已经在同一页面上使用其他 UI Bootstrap 指令我收到此错误，例如 Carousel、Buttons、Modal 等. 这种情况仅与下拉指令有关。

Answer 1

您的控制器名称有冲突。

Angular-UI 使用 'DropdownController' 作为其内部控制器之一。

将控制器名称更改为其他名称，它应该可以工作。通常，对您的控制器命名有某种约定是一种很好的做法。例如，如果您的模块名为 'Dropdown'，您可以将 'dd' 添加到其中每个控制器名称的开头。

angular bootstrap dropdown error: d.init is not a function

angular bootstrap dropdown error: d.init is not a function

angularjs

angular-bootstrap