原文地址：http://www.cnblogs.com/pilixiami/p/5597837.html
Collapse折叠控件使用uib-collapse指令
<!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="/Content/bootstrap.css" rel="stylesheet" /> <title></title> <script src="/Scripts/angular.js"></script> <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script> <script> angular.module('ui.bootstrap.demo',['ui.bootstrap']).controller('CollapseDemoCtrl', function ($scope) { $scope.isCollapsed = true; $scope.coled = function () { console.log("collapsed"); } $scope.coling = function () { console.log("collapsing"); } $scope.exped = function () { console.log("expanded"); } $scope.exping = function () { console.log("expanding"); } }); </script> </head> <body> <div ng-controller="CollapseDemoCtrl"> <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> <div uib-collapse="isCollapsed" collapsed="coled()" collapsing="coling()" expanded="exped()" expanding="exping()"> <div class="well well-lg">Some content</div> </div> </div> </body> </html>
折叠控件可以使用的属性有：
(1) uib-collapse. 默认为false.表示是否收起控件
(2) collapsed.组件收起之后调用的函数.
(3) collapsing.组件收起前调用的函数.如果返回一个拒绝的promise,收起动作将被取消
(4) expanded.组件展开之后调用的函数.
(5) expanding.组件展开前调用的函数.如果返回一个拒绝的promise,展开动作将被取消
在AngularJS中使用Promise，要使用AngularJS的内置服务$q。下面这个例子返回了一个拒绝的promise：
<script> angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('CollapseDemoCtrl', function ($scope, $q) { $scope.isCollapsed = false; $scope.coled = function () { console.log("collapsed"); } $scope.coling = function () { console.log("collapsing"); var deferred = $q.defer(); var promise = deferred.promise; promise.then(function (result) { alert("Success: " + result); }, function (error) { alert("Fail: " + error); }); deferred.reject("Can't Collapse"); return promise; } $scope.exped = function () { console.log("expanded"); } $scope.exping = function () { console.log("expanding"); } }); </script>
折叠控件是手风琴控件所依赖的组件，下一篇随笔分享手风琴控件。