Question

我尝试按照一个例子使用Angular从这里滚动pagging http://akashagrawal.me/blog/2014/01/31/infinite-scroller-in-angularjs/ 这是另一个例子： http://jsfiddle.net/joshkurz/yaPK7/ 我的问题是，如何使用ajax / http请求agular进行滚动操作以从我的service.php文件获取值并显示到web？

这是我的js代码

// create the module and name it test for testing 
var routerApp = angular.module('routerApp', []);

routerApp.directive('scroller',function(){
    return {
        restrict : 'A',
        scope : {
            loadingMethod : "&"
        },
        link : function(scope,elem,attrs){

            rawElement = elem[0];
            elem.bind('scroll',function(){
                if((rawElement.scrollTop + rawElement.offsetHeight+5) >= rawElement.scrollHeight)
                {
                    scope.$apply(scope.loadingMethod);
                }

            })
        }
    }
});

routerApp.controller('MainCtrl',function($scope)
{
    $scope.items = [];
    $scope.counter= 0;
    $scope.dogs = ['tes' , 'Husky' , 'Goldendoogle'];
    $scope.loadMore =  function(){
        i = 1;

    var url = "data.php";
    $http.jsonp(url).success(function(data){
         var items = data;

        console.log(data);

    })

    while(i<10){
      // i want it can push my data not number. how to implemented that?
            $scope.items.push(++$scope.counter);
            i++;

    } 

    };

    $scope.loadMore();
})

我认为有些人可以帮助我吗？

Answer 1

根据这个演示。您需要创建工厂/服务以发送ajax请求。 e.g：

routerApp.service('thingsService', function($http){
    this.getThings = function(data){
        return $http.get('/things/url, {params : data});
    };
});

然后你指示注入这个服务，并调用＆＃39; getThings＆＃39;滚动事件由用户触发时。

routerApp.directive('scroller',function(){
return {
    restrict : 'A',
    link : function(scope,elem,attrs){

        rawElement = elem[0];
        elem.bind('scroll',function(){
            if((rawElement.scrollTop + rawElement.offsetHeight+5) >= rawElement.scrollHeight)
            {
               scope.$apply('loadMore()');
            }

        })
    }
}; });

你的控制器：

routerApp.controller('MainCtrl',function($scope, thingsService)
{
    var counter= 0;
    $scope.items = [];
    $scope.dogs = ['tes' , 'Husky' , 'Goldendoogle'];
    $scope.loadMore = function(){
        //send 'GET' request to your server 
        thingsService.getThings({page: counter}).success(function(data){
            //handle success data here like render the data to view
            $scope.items.push(data);
            counter++;
        }).error(function(){
            //handle http error here
        }); 
        // eg: /things/url?page=0 
    };
    $scope.loadMore();
});

因此每次指令监听滚动事件时，它都会触发控制器中的loadMore函数。控制器将调用ThingsService向您的服务器发送ajax请求。希望这可以提供帮助。：）

如何使用http服务进行Angular Scrolling Paging

1 个答案: