search

thenikso / angular-inview

AngularJS directive to check if a DOM element is in the browser viewport.
http://thenikso.github.io/angular-inview/
MIT License
480 stars 112 forks source link

Initial state wrong #109

Closed dbrgn closed 8 years ago

dbrgn commented 8 years ago

I'm working on a project with two scrolling views. I've set in-view-container on both containers (that have overflow: scroll set).

One of them works properly, the other one shows all contained items as inview initially. Afterwards, when scrolling inside the container, it works properly, but the initial load is wrong.

First I thought that the combination with angular-scroll-glue could be the problem, but I disabled that and it still shows all elements as initially visible.

Any idea how to debug this issue?

thenikso commented 8 years ago

interesting, there are various issues concerting the initial state. could you reproduce you problem with something like JSBin https://jsbin.com/sinoba/edit?html,js,output ?

mattarau commented 8 years ago

I'm having the same issue here.

@thenikso It might be something to do with the directive being fired before the DOM is rendered. I had the same issue in a custom directive in my project and after wrapping the link's method first call in a $timeout, it worked perfectly.

More infos here: http://stackoverflow.com/questions/11125078/is-there-a-post-render-callback-for-angular-js-directive

P.S.: I'm out of time to test and send a PR now, but let me know if you'll need help and I try to check it when I have some time.

mabeyj commented 8 years ago

I'm having a similar issue as well, not with overflow: scroll, but with a list that is dynamically populated. I have a list that is fetched from an API and the list is hidden with ng-show until the fetch finishes. When it does finish, all items are reported as inview and then it works correctly after scrolling.

Example: https://jsbin.com/tuyadihobi/edit?html,js,output

Changing the ng-show to ng-if fixes it. Might be similar to #93.

thenikso commented 8 years ago

Could any of you try out PR #110 ? It should fix the problem. The money is on the setTimeout at line 370

thanks for the feedback! cc @mabeyj @mdentinho @dbrgn

mabeyj commented 8 years ago

@thenikso That PR does indeed fix it for me. Thanks!

dbrgn commented 8 years ago

Yep, seems to work fine now, thanks! :)

thenikso commented 8 years ago

Fantastic 🎉 version 2.1.0 is now on npm

alejandroiglesias commented 6 years ago

@thenikso this is broken again in version 3.0.0. I have a container with list items, the items that are initially visible are not triggering the inView expression until I scroll. We have to keep 2.x on our project for now.