一、此处示例使用iconic的动画加载

1.自定义ajax服务封装

@H_301_4@//全局配置请求处理 app.service('$ajax',function ($http,$ionicLoading) { this.get = function (url,data,onSuccess,onError) { $ionicLoading.show(); //显示动画 $http.get(url,{ param: data }) .then(function (result) { if (result.status == 200) { if (onSuccess) onSuccess(result.data); } else { if (onError) onError(result.data); } $ionicLoading.hide(); //隐藏动画 }).catch(function (err) { console.error(err); if (onError) onError(err.data); $ionicLoading.hide(); //隐藏动画 }); } });2.页面内容

<div class="list">
    <div class="item">
        <button class="button button-balanced" ng-click="show($event);">加载</button>
    </div>
</div>
<ion-content overflow-scroll="false">{{content}}</ion-content>

3.使用实例

@H_301_4@var app = angular.module('myApp',['ionic']); //全局配置加载动作 app.constant('$ionicLoadingConfig',{ template: '<ion-spinner icon="lines" class="spinner-calm"></ion-spinner>',animation: 'fade-in' }); @H_301_4@app.controller('myCtrl',function ($scope,$http,$ajax) { $scope.show = function ($event) { //显示加载 $ajax.get('http://www.gongjuji.net',{},function (data) { $scope.content = data; }); $event.stopPropagation(); } });显示效果：

更多：

AngularJs $http 请求服务整理

AngularJs constant()和value()

AngularJS阻止事件冒泡$event.stopPropagation()