AngularJs的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.组件收起前调用的函数.要是重临1个驳回的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>

 

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

 

相关文章