angularjs实现点击加载更多

谁借莪１个温暖的怀抱￠ 2022-07-27 17:29 206阅读 0赞

做个人博客时遇到这个需求，首先说下遇到难点：  
1.动态插入指令，angular并不能正确渲染，而是以普通的html标签插入，也没有class=”ng-scope”，这与angularjs的加载顺序有关，下面再说。  
2.angualr里的$http服务是异步的，没有同步的概念，当用户不停的点击“加载更多”按钮时，数据如果还未请求过来，等响应完毕后会出现相同的好几组数据。

--------------------

对于第一点：  
（图片来自[http://my.oschina.net/brant/blog/419641][http_my.oschina.net_brant_blog_419641]）  
![图片来自<a href=][a href]http://my.oschina.net/brant/blog/419641” title=”” />  
因为第一次运行已结束了，所以需要重新编译

//需要注入$compile服务
    var el = $compile("<articleblock ng-repeat='article in articles" + i + "'></articleblock>")($scope); //重新compile一下，再append
                    $("#main").append(el);

具体如下:directive.js

indexAPP.directive('pagination', function($compile) { 
        return {
            restrict: 'AEMC', // E = Element, A = Attribute, C = Class, M = Comment
            scope: true,
            template: "<input type='button' value='加载更多'/>",
            link: function($scope, iElm, iAttrs, controller) { 
                var i =1; //计数，第几次加载
                $("pagination input").bind("click", function() { 
                    $("pagination input").attr("disabled", "true");
                    $("pagination input").val("正在加载....败着急");
                    $scope.getAbstract();
                    var el = $compile("<articleblock ng-repeat='article in articles" + i + "'></articleblock>")($scope); //重新compile一下，再append
                    i++;
                    $("#main").append(el);
    
                })
    
            }
        }
    
    });

对于第二点：查阅资料发现可以用promise模拟同步，但我选择了投机取巧的解决方案，就是，在第一次未加载完之前，把按钮设为禁用，需要用到then()  
article\_controller.js

articleModule.controller('ArticleCtrl', function($scope, $http) { 
    
        var offset = 0, //当前页数
            limit = 2,  //一页多少篇
            i = 0; //第几次加载
        $scope.getAbstract = function() { 
    
            $http.get('api/getPostAbstract', {
                    params: {
                        offset, limit
    
                    }
                })
                .success(function(data, status, headers, config) { 
                    if (i == 0) {
                        $scope.articles = data;
                        i++;
                    } else if (i >= 1)
                        $scope["articles" + i++] = data;
                    offset = offset + limit;
    
                }).error(function(data, status, headers, config) { 
                    throw new Error('Something went wrong...');
                }).then(function(result) { 
    
                    $("pagination input").removeAttr("disabled");
                    $("pagination input").val("点击加载更多");
                    if(result.data.length<=0) $("pagination input").val("没有更多文章啦~");
                });
    
        }
        $scope.getAbstract();
    
    });

article.html

--------------------

我知道我这里通过两边都设置i，不大好，但也暂时找不到好办法，我想在then里面return当前的i，但是好像实现不了，嗯嗯嗯，纠结，而且http服务貌似应该放在factory方便使用？  
我这样功能都能实现，就是感觉代码质量不够高，希望能早到更好的办法

[http_my.oschina.net_brant_blog_419641]: http://my.oschina.net/brant/blog/419641
[a href]: /images/20220727/583a8ac23261422faef0ebe7d7cf0f70.png