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

Posted 2020-09-13 codeing or artist ?

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.组件收起前调用的函数.如果返回一个拒绝的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>

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

以上是关于AngularJs的UI组件ui-Bootstrap分享——Collapse的主要内容，如果未能解决你的问题，请参考以下文章

ui-router 中的 AngularJS 组件/范围问题

requirejs 和 angularjs 1.5 注入 ui.router 组件失败

Angularjs中使用ui-route如何异步加载组件？

AngularJs的UI组件ui-Bootstrap分享——Accordion

AngularJs的UI组件ui-Bootstrap分享——Datepicker Popup