Angular.js: watch one object's height and update other object's padding

Question

I can watch in a directive one object's property (actually - clientHeight). But how to change other object's padding-top according to this height? I know how to do this using jQuery, but I am looking for an Angular way.

In Angular one can access some page element using a directive. Ok, but how to access other page element in the same directive?

Community · Accepted Answer · 2017-05-23 11:43:21Z

5

There are a number of ways you could do this. For all of the suggestions below, assume you have two directives – one for watching the clientHeight, the other for adjusting the padding.

Create a service (that is injected into both directives). Have the first directive modify an object property in the service (e.g., someObj.prop1). The other directive $watches that object property.
Use events. Have the first directive $emit or $broadcast an event and the second directive can listen for it using $on (in its link function or in its own controller).
If there is an ancestor relationship, you can require the ancestor directive's controller in the descendant directive. See AngularJS: reuse component with different parent for an example.
Not recommended, but another option: use $rootScope instead of a service: inject $rootScope into both directives. Have the first directive modify an object property on $rootScope. The other directive $watches that object property.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Feb 28, 2013 at 15:58

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

2 Comments

Jay Over a year ago

+1. Which method would you prefer if you were to do this in your application and why?

Mark Rajcok Over a year ago

@Trevor, if the two elements on which the directives are used are related and always/naturally have an ancestor-descendant relationship, I'd go with require. If there may be (now or in the future) some additional information sharing going on between these directives, a service. If this is a one-off get-it-done-quick app, or I'm feeling lazy, $rootScope or events.

Collectives™ on Stack Overflow

Angular.js: watch one object's height and update other object's padding

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related