我尝试在angular.js组件上应用ngInfiniteScroll
我知道需要使用ng-repeat,但实际上我不知道该如何应用。

就我而言,数据被构建为HTML文档以便重复。
每个$ctrl.htmlViews数据都这样。

<li ...> ... </li> <li ...> ... </li> ... <li ...> ... </li>


我想将这些文档附加在下面的<ul>中。

<div class="scroll" id="antTalkList" view-type="total
    <ul class="user_list list ng-scope"
        infinite-scroll='$ctrl.loadMore()' infinite-scroll-distance='1'>
        <div ng-repeat="item in $ctrl.htmlViews"><!-- I don't wanna use this -->
            <ng-bind-html ng-bind-html="item"> </ng-bind-html>
        </div>
    </ul>
</div>


这是我的Controller代码片段。

.component('antList', {
    templateUrl : 'templates/ant-list.html'
    , controller : function AntListController($http, $attrs, $sce){
        var self = this;
        this.htmlViews = [];
        this.loading = false;

        this.loadMore = function(){
            $http({
                method : "GET",
                url : 'ant/list?pageCount=20&startIndex='
                    + $('#antTalkList .user_list li').size()
                    + '&sectionId=' +$attrs.talkType
            }).then(function mySucces(response) {
                self.htmlViews.push($sce.trustAsHtml(response.data));
            });
        }

    }
})


$http ajax请求的结果已经以如下所示的HTML代码构建。

<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
...


我以为带有ng-repat的标记会被拒绝,所以我写了类似上面的代码的代码。但是,我不想使用<div ng-repeat= ....></div>。因为这种情况,结果页面将是这样。

<ul ...>
  <div>
   <li ...>
    ...
  </div>
  <div>
   <li ...>
    ...
  </div>
</ul>


我认为这看起来很糟糕。如果没有div这样的其他标签,如何重复?

还有一个问题。

我声明了infinite-scroll='$ctrl.loadMore()' infinite-scroll-distance='1'但在加载后angular.js不会调用loadMore()函数(这意味着初始化时只有1个请求,不再调用该函数)。

最佳答案

您可以这样做-用div替换li

<ul>
  <li ng-repeat="item in $ctrl.htmlViews">
    <ng-bind-html ng-bind-html="item"> </ng-bind-html>
  </li>
</ul>


也可以使用ng-bind-html作为属性:

<ul>
  <li ng-repeat="item in $ctrl.htmlViews" ng-bind-html="item"></li>
</ul>

10-05 20:54
查看更多