$inview not recalculated after initially seen and height added.

[doelgonzo]

I found an issue with the $inview initial value.

I have a box with a spinner in it while data is loading. There is a div that triggers $inview changes at the bottom of what will be a long list.

When done loading, the page shows an overlay footer on the page, and change its class when $inview is true. (i.e. background white when not in view, background gray when getting to the bottom of the list, so div is in view).

The problem is, the div that triggers $inview to change starts off inside the screen, making it be true. When the data finishes loading, it renders and pushes the div outside of the viewport. However, $inview doesn't seem to change to be false. It does change as soon as there is any tiny scrolling event. Is there something I can call to make $inview recalculate?

[ericbiewener]

I was experiencing the same root issue, although I was trying to accomplish something different. I was finding that the infinite scroll was triggered immediately on page load before the initial set of data could be rendered to the DOM. Here's how I solved it. Perhaps you can use something in this approach for dealing with your ng-class issue.

1. Assign $inview to a controller variable:

<div in-view="ctrl.$inview = $inview; $inview && ctrl.fetchMoreResults()"></div>

2. Watch for changes to $inview, and flip a flag once it becomes false:

ctrl.infiniteScrollHasMovedOffscreen = false;
  $scope.$watch("ctrl.$inview", () => {
    // Explicit false check required since `$inview` will initialize to `undefined`
    if (ctrl.$inview === false) ctrl.infiniteScrollHasMovedOffscreen = true;
  });

3. In the method that is triggered by the infinite scroll, bail out if the flag is true:

ctrl.fetchMoreResults = function() {
  if (skipInfiniteScrollFetch) return;
  ...
};

As you noted, $inview will get recalculated as soon as the user begins to scroll. If it is calculated to be false, my skipInfiniteScrollFetch flag becomes false, thus no longer preventing fetchMoreResults() from running.