AngularJSAngularJs的UI组件ui-Bootstrap分享(二)——Collapse

初稿地址: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>

 

折叠控件是手风琴控件所指的机件,下一样篇随笔分享手风琴控件。

 

相关文章