Angular JS $watch vs $on

Question

I want to execute a function inside a directive, whenever there is a state change in the parent scope.

The obvious way to achieve this is to use event broadcasts ($broadcast) and listeners ($on).

I am curious if using a $watch is an alternative to event broadcast. If it is, how do the two compare?

As far as I understand, the expression to be watched is evaluated every $digest cycle. So are events more efficient than watch?

Solution

The $watch function is used to watch variables on the scope. Scope inheritance allows you to watch parent scope variables as well, so that is definitely the way to go for your use case. As you correctly said, $on is used to watch for events, which you can $broadcast to child scopes or $emit to parent scopes. This gives you much more control, but it might cause more mistakes while coding, since you could get an update to a scope variable from a point which you don't monitor and forget to notify the listeners.

You can still use events when you don't inherit scope variables. But be careful not to pollute a large scope, using services might be an option there, because you immediately see whether it is injected or not.

Since a directive gets the scope it is on (or inherits from it), I would say $watch is a much cleaner option here.

If you want to have an isolated scope on your directive, you can pass arguments as attributes and $observe them.