Несколько директив атрибутов Angular.js работают независимо

У меня есть директива, которую я использую как атрибут. Директива добавляет и удаляет класс, который запускает анимацию 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>

angularjs angularjs-directive
person byrdr    schedule 01.06.2015    source источник
comment
Поможет ли проверка видимости элемента перед выполнением логики прокрутки?   -  person sirrocco    schedule 01.06.2015
comment
пожалуйста, настройте плункер   -  person tpie    schedule 01.06.2015

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны проверить, виден ли элемент в окне просмотра с помощью

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

как Как чтобы узнать, виден ли элемент DOM в текущем окне просмотра?

чтобы

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();
});
person kwangsa    schedule 01.06.2015
comment
Благодарю вас! Моя логика была неверной, вызывая элементы на основе окна, а не элемента. Я также изолировал прицел, и он работает. - person byrdr; 01.06.2015

arrow_upward
0
arrow_downward

Вот мое окончательное решение благодаря @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();
  });
      }
};
})
person byrdr    schedule 01.06.2015