Best way to encapsulate this jQuery functionality into angular directives?

Question

I'm working in AngularJS and trying to encapsulate things into directives. I'm needing to use jQuery to implement some scrolling functionality. I want a parent div's child button to remain fixed at the bottom of the screen when the div is only partially visible. Here's a jsfiddle of what I'm wanting to put into Angular.

Here's the HTML (also viewable in 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>

I'm trying to avoid using ID selectors in Angular (I think they're bad for directives). So far I've done this by using attribute directives on elements and storing the element in the directive's link function. This works fine when the directive doesn't need to write HTML of its own. If I write HTML in the attribute directive, it overrides the parent's HTML.

In this case, however, I'm needing the attribute directive to contain a button. If I wrote the HTML for the button, it would delete the HTML for my parent.

So the problem is that I can't use an attribute directive to get the parent element in Angular.

I'm probably going about this all the wrong way, but I'm hoping someone with more Angular experience can understand my thought process and point me in the right direction?

Let me see if I understood correctly. You want using by directive to remove the parent element when the button get press? — Dvir
– Dvir, Commented Nov 17, 2015 at 23:32
Sorry, not quite. I want a child element (the button) inside the parent element. I want to move the child element around the page using the parent element's position. To access the parent's position, I'll need the parent element. But I'm trying to avoid using an ID selector to retrieve the element. I'm hoping to use an attribute directive to access the element, while encapsulating this jQuery functionality. It's complicated and I'm not sure I fully understand my idea, but I'm hoping someone might. — nardnob
– nardnob, Commented Nov 17, 2015 at 23:35
you can use jQuery parentsUntil method to find the parent. The rest I didn't understand but you will know what to do from there I guess. — Dvir
– Dvir, Commented Nov 17, 2015 at 23:38
I.. I didn't realize it would be that simple. I guess I could traverse up to the parent using a class selector and parentsUntil(). Thanks a lot. Could you put that into an answer so I can mark it? — nardnob
– nardnob, Commented Nov 17, 2015 at 23:40
To get the parent element inside a directive link function : $(element).parent() — gr3g
– gr3g, Commented Nov 17, 2015 at 23:51

Dvir · Accepted Answer · 2015-11-17 23:42:13Z

1

You can find the parent with jQuery, it will make it easier. Use the parentsUntil() method with the parent class.

answered Nov 17, 2015 at 23:42

Dvir

3,3382 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nardnob Over a year ago

Also, like gr3g commented above: "To get the parent element inside a directive link function : $(element).parent()"

Collectives™ on Stack Overflow

Best way to encapsulate this jQuery functionality into angular directives?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related