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，我不知道从哪里开始。身体标签上的自定义指令？有没有人对我可能会看到的这类常见问题有任何建议或资源？

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很好地总结了为什么你不应该害怕使用指令。

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

1 个答案: