1. app.js
var app=angular.module("myApp",["ionic","myController","serviceController"]); app.config(function(){});
2. controller.js
angular.module("shopcontroller",[]) .controller("listController",function(listservice,$scope){ $scope.getData=function(){ listservice.getData(function(list){ $scope.data=list; // 广播 $scope.$broadcast('scroll.infiniteScrollComplete'); }) }; $scope.flag=function(){ return listservice.hasData(); } }) .controller("listDatailController",function($stateParams,listservice,$scope,$sce){ var id=$stateParams.id; listservice.getOneData(id,function(data){ $scope.datail=data.result[0].content; $scope.datail=$sce.trustAsHtml($scope.datail); }); });
3. service.js
1.回调函数拿数据
angular.module("serivecontroller",[]) .service("listservice",function($http){ var list=[]; var page=1; var flag=true; return{ getData:function(callback){ if(flag){ var myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page="+page+"&callback=JSON_CALLBACK"; $http.jsonp(myUrl).success(function(data){ list=list.concat(data.result); callback(list); page++; if(data.result.length<20){ flag=false; } }).error(function(){ alert("加载错误"); }); } }, hasData:function(){ return flag; } , getOneData:function(id,callback){ var myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid="+id+"&callback=JSON_CALLBACK"; $http.jsonp(myUrl).success(function(data){ callback(data); }).error(function(){ alert("加载错误"); }); } } });
2.广播获取数据
拿到请求数据也可以不用回调函数,用广播来实现
service.js代码:
requestData:function(){ var myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page="+page+"&callback=JSON_CALLBACK"; $http.jsonp(myUrl).success(function(data){ list=list.concat(data.result); //广播 数据拿到以后告诉controller 去拿数据 这里广播的名字(newsListUpdata)自己起,但是有唯一性 广播的同时也可以传数据 $rootScope.$broadcast('newsListUpdata',list); page++; }) }
controller.js代码
/*接收到广播以后去拿数据,newsListUpdata与服务里广播的名字一致*/ $scope.$on('newsListUpdata',function(eve,data){ /*这里得到的数据不会乱码,不需要再用$sce去解析*/ $scope.list=data; /*拿到数据就到广播上拉刷新*/ $scope.$broadcast('scroll.infiniteScrollComplete'); }) /*触发loadMore就调请求数据函数,但是收到广播时才去调用获取数据函数*/ $scope.loadMore=function(){ newsService.requestData(); }