ionic 背景层

在 UI 设计和交互实现里，经常会遇到这样的需求：比如弹出框、加载框，或者其他各类弹出层出现时，需要把背景层显示出来；而在它们关闭时，又要把背景层隐藏掉。

在组件里，想把背景遮罩显示出来，可以调用$ionicBackdrop.retain()；不需要时，再通过$ionicBackdrop.release()将背景层隐藏。

每次调用retain后，背景会一直显示，直到调用release消除背景层。

实例

HTML 代码

    
        
            
$ionicBackdrop
        
    

Ja vaScript 代码

angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.controller( 'actionsheetCtl',['$scope','$timeout' ,'$ionicBackdrop',function($scope,$timeout,$ionicBackdrop){
$scope.action = function() {
       $ionicBackdrop.retain();
       $timeout(function() {    //默认让它1秒后消失
         $ionicBackdrop.release();
       }, 1000);
    }; 
}])

显示效果如下图所示：