元素的 "collapse" 属性不起作用？

Question

我正在尝试构建一个 table，如此 JSFiddle which I found here。

我注意到很多元素都有 collapse="<boolean>" 属性，只要属性为真，您就会得到一个漂亮的折叠动画。我也尝试在网上查找有关 collapse 属性的文档，但没有找到任何内容。但是，我还注意到 angular 的版本相当过时（1.0.5 而不是我目前使用的 1.5）。如果我尝试替换对 angular 1.5 的引用，jsfiddle 示例也会停止工作。我的问题是，假设不推荐使用 collapse，我如何在 angular 1.5 中重现这种效果？

Answer 1

collapse/uib-collapse指令属于angular-ui-bootstrap库，文档可以在这里找到：

https://angular-ui.github.io/bootstrap/#/collapse

运行 under Angular 1.5.0:

指令没有问题

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

angular.module('App').controller('Controller', [
             '$scope',
    function ($scope) {
        $scope.isCollapsed = false;
    }
]);

<!DOCTYPE html>
    <html ng-app="App">
        <head>
            <meta charset="utf-8" />
            <title>Angular 1.5.0</title>
            <script>document.write('<base href="' + document.location + '" />');</script>
            <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
            <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>
            <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
            <script type="application/javascript" src="app.js"></script>
        </head>
        <body ng-controller="Controller">
            <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
         <hr>
            <div uib-collapse="isCollapsed">
          <div class="well well-lg">
                  Some content
                </div>
         </div>
     </body>
    </html>

元素的 "collapse" 属性不起作用？

element's "collapse" attribute not working?

twitter-bootstrap

angularjs

angular-ui-bootstrap