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>
折叠控件是手风琴控件所依赖的组件，下一篇随笔分享手风琴控件。
时间： 2024-09-29 17:22:00