angular-inview icon indicating copy to clipboard operation
angular-inview copied to clipboard

Issues with ng-show/ng-hide

Open lopsided opened this issue 9 years ago • 4 comments

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?

lopsided avatar Oct 13 '16 16:10 lopsided

jQuery ref: https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

lopsided avatar Oct 14 '16 11:10 lopsided

Yes, this absolutely solved the problem also for me!

joschne avatar Oct 26 '16 11:10 joschne

cool! merged #116

thenikso avatar Nov 17 '16 14:11 thenikso

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?

thenikso avatar Nov 17 '16 16:11 thenikso