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

我通常不喜欢问这样的问题，但我对棱角分明的问题还不太熟悉，我试图把所有的概念都想清楚。对我来说，一个棘手的方面是页面的不同区域如何相互作用

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

在jQuery中，它可能如下所示：

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

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

---

实际上，我不知道从哪里开始。body标签上的自定义指令？有人对我可能看到的这类问题有什么建议或资源吗？

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

指令的代码可以如此简单（无jQuery）：

我建议大家读一下Angular文档，看一下egghead教程视频。他们是一个伟大的帮助时，开始与角度发展

---

另外，很好地总结了为什么您不应该害怕使用指令。

是的，这样的指令将是一个很好的起点。如果你还没有读过AngularJS的教程，请阅读AngularJS教程并观看一些视频，以了解基本的工作流程。我一直在阅读AngularJS的一本书，效果很好。我还没有看过这些视频，但它们在列表中！我对Angular的MVC方法有很好的理解，但我仍然觉得在元素交互方面有些东西还没有点击。就我个人而言，我喜欢将指令视为（大部分）自主的“小工具”。jQuery说，嘿，这里有一个新闻小部件，让我们抓住它，把它涂成蓝色，Angular创建了这个小部件，并给它自己的工具把自己涂成蓝色。都在一个方便的地方。有一些很好的代码示例。@Sprottenwels是的，我也是这么想的！然而，我不完全确定的是“小部件”之间的“角度方式”通信。在这种情况下，主体的行为取决于#标题的高度和当前窗口滚动位置。在jQuery中，我们习惯于引用其他元素（通过选择器），但在Angular中，对于这种类型的交互，建议使用什么方法？我将使用共享服务。服务是提供数据（以及与之交互的方法）的一种方式，可以在需要时注入数据。例如，您可以创建一个服务，在每次滚动页面时更新属性，并在指令中为该值设置一个监视程序。然后，您的指令将收到关于此属性的每个更改的通知。因此，通过ID直接与元素交互并引用元素，等等。这仍然是一条路要走，我们只是以不同的方式打包/调用代码，即在本例中，在指令中使用，而不是在全局范围内使用jQuery代码。指令应视为HTML的扩展。因此，如果您希望某些元素具有此滚动功能，请为其创建一个指令，并将其放在您想要的任何元素上。当然，我的示例中的指令尚未完全恢复，但您可以理解我的意思。

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