Open jorluiseptor opened 8 years ago
@jorluiseptor Did you define a infinite-scroll-container? I was able to get this working with md-content without having to overwrite any styles.
Something like: html
<md-content flex id="inf-wrapper">
<md-list class="activity-feed" ng-if="vm.records.length > 0"
infinite-scroll="vm.infScroller()" infinite-scroll-distance="0"
infinite-scroll-disabled="vm.pause_scroll" infinite-scroll-container="'#inf-wrapper'">
<md-list-item >Lorem Ipsum</md-list-item>
</md-list>
</md-content>
I gave up, actually. I ended up adding a button at the end to load more records. See: http://dev.roadzer.com/
@jorluiseptor Check a fork from https://github.com/oxenti/ngOxenti-infinite-scroll It works for me - I'm using Material Design as well.
One trick though - for some reason he's using 1sec delay(!?) for the 1st load. Need to figure out why and best way to turn off...
I put in a little hack that works.
In my controller I just listen for the scroll event and re-fire it as a window event (which is what ngInfinite scroll looks for). I haven't testing it properly yet but it works for now.
Add an id tag on your parent md-content container, mine was "contentWrapper"
<md-content flex id="contentWrapper">
In your controller for the view in which ngInfiniteScroll loads, just put this into a constructor type function. You should probably debounce it too, but I haven't got there yet.
Here is the javascript.
var dataContainer = angular.element('#contentWrapper');
dataContainer.on('scroll', function (event) {
var scrollEvent = new Event('scroll');
$window.dispatchEvent(scrollEvent);
});
news?
No news?...
Abandoning...
Angular material has this feature built in under the name virtual scroll. You should give it a go
@graingert yes, Angular Material has virtualRepeat with infiniteScroll behaviour but it does not allow flex container, you MUST define a size, so not so useful.
@stephengardner I made it working by using infinite-scroll-container directive. The example of steezeburger works fine.
lil hack based on @superkew works with one item each row or many
var dataContainer = angular.element('#inf-wrapper');
dataContainer.on('scroll', function (event) {
var innerScrollTop = dataContainer[0].offsetHeight + dataContainer[0].scrollTop;
if(innerScrollTop>=dataContainer[0].scrollHeight) {
// load new entries
$scope.list.load();
}
});
Was having the same issue with Angular Material, made this directive based off of @superkew and @nathanielrich ideas and it seems to be working fine. Just add infinite-scroll-fix
to any parent <md-content>
that contains an infinite scroll. (<md-content infinite-scroll-fix>
)
app.directive('infiniteScrollFix', function($window) {
return {
restrict: 'A',
link: function($scope, $element) {
$element.on('scroll', function(event) {
$window.dispatchEvent(new Event('scroll'));
});
}
};
});
still have the same problem in multi md-content
I'll check in a year later and say it still doesn't work if you have a multi nested md-content
I noticed that the ngInfiniteScroll (ngIS) doesn't work well with Angular Material. I discovered that Angular Material's md-content element has a CSS rule of overflow:auto;. This prevents the loadMore() method to trigger on ngIS. I was able to fix this by changing my CSS to md-element { overflow:visible; }. However, I need to see if making the overflow visible breaks something else on Angular Material.