Angular UI Bootstrap崩溃 - 什么是错的?

时间:2014-12-30 07:52:42

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

我似乎无法通过角度ui bootstraps崩溃指令来工作。我已经设置了一个带有最小例子的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>

JS

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

2 个答案:

答案 0 :(得分:5)

您需要声明ui.bootstrap模块依赖项才能使用它:

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

答案 1 :(得分:3)

您应该在ui.bootstrap模块上的app模块中声明一个依赖项:

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

这是您的最新工作plnkr