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