Angular.js multiple attribute directives working independently

Question

I have a directive, which I'm using as an attribute. The directive adds and removes a class, which triggers a css animation to fade the div in and out. I have this in multiple locations on my page; however, once the first div picks up the value, the rest of the divs(which are out of view), pick up the value as well. How would I make these directives work independently?

Directive:

.directive("scroll", function ($window) {
return function (scope, element, attrs) {

    function getScrollOffsets(w) {

        // Use the specified window or the current window if no argument 
        w = w || window;

        // This works for all browsers except IE versions 8 and before
        if (w.pageXOffset != null) return {
            x: w.pageXOffset,
            y: w.pageYOffset
        };

    }

    angular.element($window).bind("scroll", function (e) {
        var offset = getScrollOffsets($window);
         if (offset.y >= 10) {
             e.preventDefault();
             e.stopPropagation();
             element.removeClass('not-in-view');
             element.addClass('in-view');
         } else {
             e.preventDefault();
             e.stopPropagation();
             element.removeClass('in-view');
             element.addClass('not-in-view');
         }
        scope.$apply();
    });
};
});

HTML:

<div class="sidebar col-md-4" scroll>
   <h1>Content</h1>
</div>

<div class="sidebar col-md-4" scroll>
   <h1>More Content</h1>
</div>

Would checking if the element is visible before doing the scroll logic help ? — sirrocco, Jun 01 '15 at 03:18

score 1 · Accepted Answer · edited May 23 '17 at 10:26

You should check if the element is visible in viewport by

function isElementInViewport (el) {

//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
}

var rect = el.getBoundingClientRect();

return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}

as How to tell if a DOM element is visible in the current viewport?

so that

angular.element($window).bind("scroll", function (e) {

     if (isElementInViewport(element)) {
         e.preventDefault();
         e.stopPropagation();
         element.removeClass('not-in-view');
         element.addClass('in-view');
     } else {
         e.preventDefault();
         e.stopPropagation();
         element.removeClass('in-view');
         element.addClass('not-in-view');
     }
    scope.$apply();
});

Thank you! My logic was incorrect by triggering the elements based on the window, not the element. I also isolated the scope and have it working. — byrdr, Jun 01 '15 at 15:31

score 0 · Answer 2 · answered Jun 01 '15 at 15:54

Here is my final solution thanks to @kwan, I tweaked it a bit.

.directive("scroll", function ($window) {
return{
scope:true,
link: function (scope, el, attrs) {
    function isElementInViewport (el) {

      //special bonus for those using jQuery
      if (typeof jQuery === "function" && el instanceof jQuery) {
          el = el[0];
      }
      var height = $(el).height();
      var rect = el.getBoundingClientRect();

      return (
          rect.top >= -(height / 1.25) &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)+ (height / 1.25) && /*or $(window).height() */
          rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
      );
      }

    angular.element($window).bind("scroll", function (e) {

       if (isElementInViewport(el)) {
           e.preventDefault();
           e.stopPropagation();
           el.removeClass('not-in-view');
           el.addClass('in-view');
       } else {
           e.preventDefault();
           e.stopPropagation();
           el.removeClass('in-view');
           el.addClass('not-in-view');
       }
      scope.$apply();
  });
      }
};
})

Angular.js multiple attribute directives working independently

2 Answers2