CODEWITHSUNDEEP
javascripthtmlcssangularjstwitter-bootstrap
Eric Mitjans
Eric Mitjans

Reputation: 2169

Height issues with ng Infinite Scroll, Bootstrap 3 and AngularJS

I'm implementing the ng Infinite Scroll module in my app and I ran into a couple of issues.

My current problem is that the function will be triggered in every single scroll event. I've found a mention to the problem in the module FAQ, but so far the solution to include a div with clear:both; at the end of the container has not helped.

Here's a quote from the FAQ:

Why is ngInfiniteScroll triggering my expression on every single scroll event?

The infiniteScroll directive uses the height of the element that it's attached to in order to determine how close to the bottom of the window it is. In some cases, the browser can report a height of 0, which causes this behavior. Usually, this is due to a container element that only contains floated children. The simplest way to fix this problem is to add a "spacer" element to the bottom of the container (something like div style='clear: both;' /div); see this StackOverflow question and its associated answers for more details.

Care to take a look and shed some light on the problem?

Here's my function and a working Plunker.

    var _page = 0;
    $scope.releases = [];
    $scope.loadDetails = function(id) {
        _page++;
        console.log(_page);
        $http.get('http://api.discogs.com/artists/' + id + '/releases?page=' + _page + '&per_page=12').then(function(data2) {
            $scope.releases = data2.releases;
        });
    };

Upvotes: 0

Views: 1824

Answers (1)

chimmi
chimmi

Reputation: 2085

I believe infinite scroll is't an issue here. I've fixed some problems in your code, see this plunk, and everything looks normal to me.

Upvotes: 1

Related Questions