Compatibility with Angular Material

[jorluiseptor]

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.

[steezeburger]

@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>

[jorluiseptor]

I gave up, actually. I ended up adding a button at the end to load more records. See: http://dev.roadzer.com/

[oharlem]

@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...

[superkew]

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

[simonered]

news?

[stephengardner]

No news?...

Abandoning...

[graingert]

Angular material has this feature built in under the name virtual scroll. You should give it a go

[simonered]

@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.

[nathanielrich]

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

[FunkeDope]

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

[amirping]

still have the same problem in multi md-content

[ADustyOldMuffin-zz]

I'll check in a year later and say it still doesn't work if you have a multi nested md-content