• ionic--分模块


    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();
    }
  • 相关阅读:
    AJPFX总结hashmap和hashtable的区别
    AJPFX分享JAVA修饰符详解
    AJPFX分享java排序之希尔排序
    Mysql框架---HMySql
    html/css实现聊天布局
    Java连接Mysql
    微信小程序九宫格布局
    Android设计模式——MVP
    iOS与H5交互(WKWbebView)
    iOS MJExtension的使用
  • 原文地址:https://www.cnblogs.com/SPHmomo/p/7535222.html
Copyright © 2020-2023  润新知