Modify scope within link function in AngularJS

Question

Normally in all examples/source code of AngularJS modifications of scope is done in controllers. In my directive I need to get some information from another directive (or it's scope) and put it into scope (so visible in template of directive). As this information is common for all instances of this directive, using scope binding does not sound good for me.

So the only solution I found is to modify instance scope in linking function:

link: function(scope, element, attr, parentCtrl) {      
  scope.data = parentCtrl.someData;      
}

This solution works. Plnkr example

The question: Is it ok according to AngularJS philosophy/style to modify scope in linking function or there is another solution?

Could you post an example of what you mean? The link is just for the starter project — Liviu T.
– Liviu T., Commented Dec 26, 2012 at 12:34

Mark Rajcok · Accepted Answer · 2012-12-26 17:59:23Z

1

Since you are creating isolate scopes in your directives (in your example plnkr), and you want to allow for parents to be 'somewhere' in the scope hierarchy (according to your comment to @MathewBerg), I believe your only option is to use the linking function to modify the scope.

(I suppose you could define methods on your MainCtrl that only the child directives should call, but enforcing that would be messy and break encapsulation).

So, to echo what @MathewBerg already said, yes, modify the scope in the directive/linking function.

answered Dec 26, 2012 at 17:59

Mark Rajcok

365k114 gold badges500 silver badges494 bronze badges

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

Comments

Mathew Berg · Accepted Answer · 2012-12-26 16:06:23Z

Modifying scope in directives is fine. As for sharing information between directives there are a few methods. One is the way you described, where you access the parents controller and get it's data, another very similar method would be to have

scope.data = scope.$parent.data;

Instead of

scope.data = parentCtrl.someData;

The general way to share stuff between directives though is to use a service. This would allow you to inject the service into each directive and they can share the values. The problem with your initial method (and the one that I've described) is that if you ever move the element around so that the hierarchy of scopes change, your code will break. This is why I would recommend using a service over both. I suggest reading up on the service docs. There's also plenty of videos out there describing how to set them up: http://www.youtube.com/watch?v=1OALSkJGsRw

Servicies could not be used in case if I have several "parent" directivies with different data (I've modified Plnkr example to reflect that). And about hierarchy - I've directly required from all childs to have 'parent' somewhere in the hierarchy. I think that 'somewhere' differ solution with '$parent' from using 'require' and controller's properties. With 'require' I can have several other scopes between 'parent' and 'child' elements and everything should work.

Collectives™ on Stack Overflow

Modify scope within link function in AngularJS

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related