javascript - 将此 jQuery 功能封装到 Angular Directive(指令)中的最佳方法？

Question

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

这是 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。

然而，在这种情况下，我需要属性指令来包含一个按钮。如果我为按钮编写 HTML，它会删除我父级的 HTML。

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

我可能以错误的方式处理这件事，但我希望有更多 Angular 经验的人能够理解我的思维过程并为我指明正确的方向？

Answer 1

您可以使用 jQuery 查找父级，这样会更容易。对父类使用 parentsUntil() 方法。