Angular UI Bootstrap 崩溃 - 怎么了？答案

【问题标题】：Angular UI Bootstrap collapse - whats wrong?Angular UI Bootstrap 崩溃 - 怎么了？
【发布时间】：2016-07-11 19:09:53
【问题描述】：

我似乎无法让 angular ui bootstraps collapse 指令工作。我已经用一个最小的例子设置了一个 plunkr，但它仍然不起作用。有人对此有所了解吗？

Plunkr

HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.1.*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="CollapseController">
    <button class="btn btn-default" ng-click="collapsed = !collapsed">Toggle</button>
    <div collapse="collapsed">
      <div>
        <h1>Hello Plunker!</h1>
      </div>
    </div>
  </body>

</html>

angular.module('app', [])
.controller('CollapseController', function($scope){
  $scope.collapsed = false;
});

【问题讨论】：

标签： angularjs angularjs-directive angular-ui-bootstrap

【解决方案1】：

你需要声明ui.bootstrap模块依赖才能使用它：

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

【讨论】：

【解决方案2】：

您应该在您的应用程序模块中声明对ui.bootstrap 模块的依赖：

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

这是您更新后的工作plnkr。

【讨论】：

@SimonTrewhella 它有时会发生在我们所有人身上:)