Question

我正在使用UI Bootstrap下拉列表，下面是我的代码：

HTML：

 <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
    <link href="content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="dropdown.js"></script>

 <div class="btn-group" uib-dropdown>
        <button id="split-button" type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger" uib-dropdown-toggle>
            <span class="caret"></span>
            <span class="sr-only">Split button!</span>
        </button>
        <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
            <li role="menuitem"><a href="#">Action</a></li>
            <li role="menuitem"><a href="#">Another action</a></li>
            <li role="menuitem"><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a href="#">Separated link</a></li>
        </ul>
    </div>

.js文件：

var app = angular.module("app", ["ui.router"]);

app.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;
    };

    $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});

下拉列表是可见的，但是在我点击下拉列表之前，下拉列表项目仍在列表项目之外。即使我点击下拉列表也没有任何反应。是CSS问题吗？我错过了链接任何文件吗？

Answer 1

原因是，

ng-app="app"。
DropDownCtrl未在您的HTML中使用，但已在dropdown.js文件中定义。
您的JS文件中未使用模块ui.bootstrap。
ui.router是一个无效的模块。

修改后的工作文件

工作Plunkr

http://plnkr.co/edit/TiQrBx9yiU0lTjHhvWRp?p=preview

HTML文件

<html ng-app="app">

    <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
    <script src="dropdown.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div ng-controller="DropdownCtrl">
     <div class="btn-group" uib-dropdown>
          <button id="split-button" type="button" class="btn btn-danger">Action</button>
          <button type="button" class="btn btn-danger" uib-dropdown-toggle>
              <span class="caret"></span>
              <span class="sr-only">Split button!</span>
          </button>
          <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
              <li role="menuitem"><a href="#">Action</a></li>
              <li role="menuitem"><a href="#">Another action</a></li>
              <li role="menuitem"><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li role="menuitem"><a href="#">Separated link</a></li>
          </ul>
      </div>
    </div>
  </body>

</html>

JS档案

var app = angular.module("app", ['ui.bootstrap']);

app.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;
    };

    $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});

UI引导下拉列表无法正常工作

1 个答案: