javascript - 如何处理指令内的窗口滚动事件？

Question

我通常不喜欢问这样的问题，但我是 Angular 的新手，并且试图了解所有概念。对我来说棘手的一个方面是页面的不同区域如何相互交互。

在我的示例中，我有一个站点，当页面滚动 X 像素时，我需要向 body 元素添加一个特定的类名。 X 是特定元素的高度。

在 jQuery 中，它可能看起来像这样:

$(window).scroll(function() {
  var top = $(window).scrollTop();

  if (top > ($('#header').height())) {
    $('body').addClass('scrolled');
  } else {
    $('body').removeClass('scrolled');
  }
});

在 Angular 中，我不确定从哪里开始。 body 标签上的自定义指令？对于我可能会考虑的这种一般类型的问题，有人有任何建议或资源吗？

Answer 1

使用指令来完成此类任务是完美的搭配。我创建了一个 Fiddle演示如何使用它。

指令的代码可以像这样简单(没有 jQuery):

angular.module("app").directive("scroll", function () {
    return {
        link: function (scope, element) {
            element[0].addEventListener("scroll",function (event) {
                var header = document.getElementById("header"),
                    body = document.getElementById("scrollMe");

                if (body.scrollTop > header.offsetHeight) {
                    body.classList.add("scrolled");
                } else {
                    body.classList.remove("scrolled");
                }
            });
        }
    }
});

我建议阅读 Angular 文档并观看 egghead 教程视频。他们在开始 Angular 开发时提供了很大的帮助。

此外，this article很好地总结了为什么你不应该害怕使用指令。