使用 angular.js 滚动 HTML 数据

Question

我正在尝试使用 angular.js 重复具有 html 数据的列表。 我想使用ngInfiniteScroll。

所以我已经建立了一个模板，就像这样。

更新：

<div class="scroll" id="antTalkList" talk-type="total" view-type="total"
    infinite-scroll='$ctrl.loadMore()' infinite-scroll-distance='2'>
    <ul class="user_list list ng-scope" ng-repeat="item in $ctrl.htmlViews">
        <ng-bind-html ng-bind-html="item"> </ng-bind-html>
</ul>
</div>

正如你在上面看到的，我不知道如何在ul 中重复$ctrl.htmlViews。每个 htmlViews 的 item 都用上面的 HTML 数据填充。

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

这是我的antList 组件。在控制器中，htmlViews在控制器初始化和滚动时通过ajax调用推送（loadMore函数）。

ng-repeat 似乎还可以，也许它运作良好。但是，infinite-scroll 不起作用。我添加了infinite-scroll="$ctrl.loadMore()" 和infinite-scroll-distance='10'。

LoadMore 函数在初始化时被调用，但在我滚动时它不会被调用。我该如何检查这种情况？

这是我的组件 sn-ps。

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

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

        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));
            });
        }
    }
})

Answer 1

<div class="scroll" id="antTalkList" talk-type="total" view-type="total"
    infinite-scroll='loadMore()' infinite-scroll-distance='2'>
    <ul class="user_list list ng-scope">
        <li ng-repeat="view in htmlViews">
         {{view}}
        </li>
    </ul>
</div>