Question

今天我已经花了我的第一个指令，但它确实有用，但我需要更多。

我的想法是我的应用程序将有一些looong表，嵌套表。我希望能够在向下滚动时将当前正在查看的表格的主题锚定到页面顶部，这样您始终可以将数据与标题匹配。我设法让第一个标题起作用：

我想做什么，但我无法解决，是如何将此指令应用于多个表头（以便嵌套标题在您滚动时也锚定）。

为了做到这一点，我现在有了一个指令，它为每个需要处理的头文件创建一个带有子对象的父对象。问题是我无法弄清楚如何获取指令来监视$ window滚动的更改：

plunker example of where it's currently at (and broken)

正如你所看到的，我非常挣扎于指令范围的概念（但似乎所有工作到目前为止）并且一旦达到这一点，它就不再是处理正确的对象

        angular.element($window).bind("scroll", function () {
          stickyHeads[i].elTop = stickyHeads[i].el.getBoundingClientRect().top;
          if ((stickyHeads[i].elTop <= glueToY) && (stickyHeads[i].inView === true)) {
            stickyHeads[i].inView = false;
            showHead(stickyHeads[i].newEl);
          };
          if (stickyHeads[i].elTop >= glueToY) {
            stickyHeads[i].inView = true;
            hideHead(stickyHeads[i].newEl);
          };
        });

有人可以给我一些建议吗？我考虑获取每个表的offset.top，并使$ window.scroll只是触发一个更改，如果它满足其中一个值，这是否有意义？或者还有其他一些我完全失踪的愤怒方式吗？

编辑：我工作了！

所以我发现如果我遍历scroll事件上的stickyHeads对象，我可以获得角度来评估offset（）。每个元素的顶部并隐藏/显示我需要它。

Updated plunker with working solution

我还在每个额外标题中添加了一个（粗糙和丑陋的）框阴影和偏移，因为它固定在页面顶部，因此您可以看到它们堆叠起来。

如果你滚过桌子的底部，我接下来需要让它们再次消失，但我认为这不应该太难。

angular $ window指令应用于多个dom元素

0 个答案: