angularjs实现点击加载更多

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

对于第一点：
（图片来自http://my.oschina.net/brant/blog/419641）

图片来自

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,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

<article class="block post" id="{{article.id}}"> <span class="round-date"> <span class="month" ng-bind="(article.post_time |dateUtil|date:'M')+'月'"></span> <span class="day" ng-bind="article.post_time |dateUtil| date:'d'"></span> </span> <header> <p class="title"> <a href="articleDetail.html?{{article.id}}" ng-bind="article.title" target="_blank"></a> </p> <p class="article-Meta"> <i class="fa fa-paper-plane-o" ng-bind="article.post_time | date:'yyyy-MM-dd'"></i> <i class="fa fa-eye" ng-bind="article.pageviews"></i> <i class="fa fa-comment-o" ng-bind="article.comments"></i></p> <div class="tag-Meta"> <div class="tag" ng-repeat="tag in article.tags" ng-bind="tag"></div> </div> </header> <div class="article-content animate-show" ng-bind-html="article.post_abstract | to_trusted" ng-show="showMe"></div> <span class="fa fa-angle-double-up compress" ng-click="toggle()"></span> </article>

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

angularjs实现点击加载更多

相关文章