I am attempting to display a list of HTML data using angular.js and would like to implement ngInfiniteScroll.
Here is the template I created:
update:
<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>
In the code above, I am unsure how to iterate through $ctrl.htmlViews within ul. Each item in htmlViews contains HTML data.
<li ... > ... </li> ... <li ... > ... </li>This is my antList component. The htmlViews are populated with HTML data from an ajax call when the controller is initialized and scrolled (loadMore function).
The ng-repeat appears to be functioning correctly, but the infinite-scroll is not working. I have added infinite-scroll="$ctrl.loadMore()" and infinite-scroll-distance='10'.
The loadMore function is called upon initialization, but it is not triggered when scrolling. How can I troubleshoot this issue?
Below are snippets of my component:
.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()
+ '§ionId=' +$attrs.talkType
}).then(function mySucces(response) {
self.htmlViews.push($sce.trustAsHtml(response.data));
});
}
}
})