Angular.js multiple attribute directives working independently - angularjs

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>

Answer 1

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();
});

Answer 2

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();
});
}
};
})