ionic--分模块

Posted 2020-10-07 Sun_

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();
}