angular-inview
angular-inview copied to clipboard
Issues with ng-show/ng-hide
Hi, firstly, great plugin, I love it.
I have an element that starts both off the page and hidden (ng-hidden). After some user interaction this is un-hidden and brought into view (other things on the page get hidden). However inview detects it as being "in-view" right from the start (or certainly from the first scroll, even when the hidden element is still far from the bottom of the viewport), so when it actually comes into view the event is not triggered.
I made a gist to give you the idea here: https://jsbin.com/yahovejexi/1/edit?html,js,output
Looking at the code I can fix this by changing lines 96-98 like so:
var isVisible = !!(element[0].offsetWidth || element[0].offsetHeight || element[0].getClientRects().length);
var info = {
inView: isVisible && intersectRect(elementRect, viewportRect),
The new var isVisible uses the same code as jquery to check if an element is visible ($(el).is(':visible')). And then if not visible then inView always returns false.
This is exactly the behaviour I want, and I'm happy to PR it, but does this work for everyone else?
jQuery ref: https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
Yes, this absolutely solved the problem also for me!
cool! merged #116
As per discussion in #119 merging PR #116 might have been premature.
Also in the jsbin above I think I could easily fix the problem by using ng-ifs instead of ng-show/ng-hide right? Why would one want to use the later over the former in those cases?