将此jQuery功能封装到angular指令中的最佳方法是什么？

Question

我在AngularJS工作并尝试将内容封装到指令中。我需要使用jQuery来实现一些滚动功能。当div只是部分可见时，我希望父div的子按钮保持固定在屏幕的底部。我希望将其纳入Angular的Here's a jsfiddle。

这里是HTML（也可以在jsfiddle中查看）：

<div class="spacer">spacer div - scroll down</div>
<div id="parent">
    parent div content
    <div id="childContainer">
        <button id="child" style="">Test Button</button>
    </div>
</div>
<div class="spacer">spacer div - scroll up</div>

我试图避免在Angular中使用ID选择器（我认为它们对指令不好）。到目前为止，我已经通过对元素使用属性指令并将该元素存储在指令的链接函数中来完成此操作。当指令不需要编写自己的HTML时，这很好用。如果我在属性指令中编写HTML，它将覆盖父HTML。

但是，在这种情况下，我需要使用attribute指令来包含按钮。如果我为按钮编写HTML，它将删除我父母的HTML。

所以问题是我不能使用属性指令来获取Angular中的父元素。

我可能会以错误的方式解决这个问题，但我希望有更多Angular经验的人能够理解我的思维过程，并指出我正确的方向？

Answer 1

您可以使用jQuery找到父级，它将使其更容易。 将parentsUntil()方法与父类一起使用。