$ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。

用法

angular.module('LoadingApp', ['ionic']) .controller('LoadingCtrl', function($scope, $ionicLoading) { $scope.show = function() { $ionicLoading.show({ template: 'Loading...' }); }; $scope.hide = function(){ $ionicLoading.hide(); }; });

方法

显示一个加载效果。

show(opts)

参数	类型	详情
opts	object	loading指示器的选项。可用属性： {string=}template指示器的html内容。 {string=}templateUrl一个加载html模板的url作为指示器的内容。 {boolean=}noBackdrop是否隐藏背景。默认情况下它会显示。 {number=}delay指示器延迟多少毫秒显示。默认为不延迟。 {number=}duration等待多少毫秒后自动隐藏指示器。默认情况下，指示器会一直显示，直到触发.hide()。

隐藏一个加载效果。

hide()

API

属性	类型	详情
delegate-handle (可选)	字符串	该句柄定义带有$ionicListDelegate的列表。
show-delete (可选)	布尔值	列表项的删除按钮当前是显示还是隐藏。
show-reorder (可选)	布尔值	列表项的排序按钮当前是显示还是隐藏。
can-swipe (可选)	布尔值	列表项是否被允许滑动显示选项按钮。默认：true。

---

实例

HTML 代码：

       
    
The Stooges
    {{stooge.name}}     

JavaScript 代码

angular.module('ionicApp', ['ionic']) .controller('AppCtrl', function($scope, $timeout, $ionicLoading) { // Setup the loader $ionicLoading.show({ content: 'Loading', animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay: 0 }); // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded. $timeout(function () { $ionicLoading.hide(); $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}]; }, 2000); });

---

$ionicLoadingConfig

设置加载的默认选项:

用法:

var app = angular.module('myApp', ['ionic']) app.constant('$ionicLoadingConfig', { template: '默认加载模板……' }); app.controller('AppCtrl', function($scope, $ionicLoading) { $scope.showLoading = function() { $ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置 }; });