元素的“折叠”属性不起作用？答案

【问题标题】：element's "collapse" attribute not working?元素的“折叠”属性不起作用？
【发布时间】：2016-02-19 07:24:00
【问题描述】：

我正在尝试建立一个表格，就像我找到的 JSFiddle 中的 here。

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

【问题讨论】：

minimal reproducible example 在这里会很好。不过有一些提示：ui-bootstrap not 需要 jquery 或 bootstrap javascript 资产。
@iH8 感谢您的反馈，我只是尝试在小提琴中引用更新版本的 angular，发现它也在那里中断，所以我将问题从“我的代码有什么问题”更改了到“如何在角度 1.5 中实现折叠效果”
collapse 不是角度指令，所以我猜这个例子不适用于 angular 1.5，因为该版本可能与您使用的 angular-ui-bootstrap 不兼容。 angular-ui.github.io/bootstrap 这里说它已经用 Angular 版本 1.4.x 进行了测试。
@CKK 我刚刚用 1.4.0 和 1.4.9 尝试过，似乎都没有恢复原始行为。如果崩溃不是角度指令，您知道崩溃从何而来吗？另外，你有没有其他方法可以重现这种效果？我使用 ng-animate 尝试了 ng-show 与 .ng-hide-add 和 .ng-hide-remove 类，但由于表格行已设置高度
这是 angular-ui 的指令。见这里：angular-ui.github.io/bootstrap/#/collapse 刚刚看到@iH8 的回答，应该可以。

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

【解决方案1】：

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

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

在 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>

【讨论】：