Angularjs 在滚动到元素时添加类

我想将一个类添加到元素中，当它在视图中时，a.k.a滚动到，但我不知道从哪里开始

假设我想将它添加到

块中，当它滚动到块中时，类将被添加，当它滚动出块时，类将被删除

---

我会提供一些html标记来应用它，但我认为使用

标记进行演示是令人满意的

我在我的一个网站上这样解决了这个问题

angular.module("Directives")

.directive("rjOnScrollTo", [
"scroll", "$window", "$rootScope",
function(scroll, $window, $rootScope) {
  function link($scope, $element) {
    var offset = 100;
    var pageLoaded = false;
    var uniqueId = "rjOnScrollTo_" + $element.get(0).id;

    var onScroll = function() {
      if (pageLoaded && $window.scrollTop() + $window.height() - offset >= $element.offset().top) {
        $element.addClass($scope.className);
        scroll.removeCallback($window, uniqueId);
      }
    };

    scroll.addCallback($window, uniqueId, onScroll);

    $scope.$on("$destroy", function() {
      scroll.removeCallback($window, uniqueId);
    });

    $scope.$on("$routeChangeSuccess", function() {
      pageLoaded = false;
    });

    $scope.$on("pageLoaded", function() {
      pageLoaded = true;
      onScroll();
    });
  }

  return {
    link: link,
    restrict: "A",
    scope: {
      "className": "@rjOnScrollTo"
    }
  };
}]);

像这样使用：

<div data-rj-on-scroll-to="my-class"></div>

编辑：

您可能希望传入偏移量参数，而不是对其进行硬编码

通过AJAX从后端加载数据的服务触发“pageLoaded”事件。在我的例子中，等待页面内容完全加载是很重要的，否则div将立即显示，类将立即添加。

当您滚动到某个项目时，模块将添加一个类。你可以用叉子叉起来，根据自己的需要调整

---

你可能已经知道了；也有许多jQuery插件用于此，用指令包装此类插件非常容易：

angular.module('testApp', [])
  .directive('onScrollAddClass', function() {
    return {
      link: function(scope, elm, attr) {

        init(elm, attr.onScrollAddClass);

        function init(elm, cls) {
          elm.viewportChecker({
            classToAdd: cls,
            repeat: true
          });
        }
      }
    }
  });

这是上面的代码。

我已经创建了一个示例来演示您的答案。当滚动到元素时，我没有看到添加了类。控制台还显示

错误：[$injector:unpr]

。