AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

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：

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

 

复制代码
 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>
复制代码

折叠控件是手风琴控件所依赖的组件，下一篇随笔分享手风琴控件。

posted on 2017-03-14 16:18  技术V类  阅读(1273)  评论(0)  编辑  收藏  举报

导航