Question

我有一个指令，我将其用作属性。该指令添加和删除一个类，该类触发css动画以淡入和淡出div。我在我的页面上有多个位置;但是，一旦第一个div获取了值，其余的div（不在视图中）也会获取该值。我如何使这些指令独立工作？

指令：

.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

您应该通过

检查元素在视口中是否可见

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

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

这样

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

这是我的最终解决方案，感谢@kwan，我稍微调了一下。

.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多个属性指令独立工作

2 个答案: