我尝试在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()
+ '§ionId=' +$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>