Search code examples
javascriptangularjsangularjs-directiveangularjs-scopedom-events

Angular.js - emit periodic event to directive


I have one directive, which translate dates and times to better - human reading - form, like "now", "one minute ago", ..

I'd like to update it periodically so dates which are translated as "now" will be after one minute updated..

One way how to solve this to make $interval in directive so it keeps updating after 60'000ms but it can be possible bottleneck for pages with large number dates using this directive..

Second thought is to make service, which will broadcast an event heartbeat to $rootScope and directives will bind listeners and updates its times. But it also means that I would traverse through all scopes in app with broadcast event every N seconds..

So the question.. Is there any way, how to make in angular (more pure solution is better) that service will fire events to only one directive?

Something like:

$directive("timeAgo").$emit("hearthbeat", new Date().getTime())

Solution

  • You may try to use a filter instead of directive. As I know, AngularJS updates filters every $digest circle. So, you'll not need to use a timer at all. But I'm not sure if I understand how filters work correctly.

    As for service, instead of $rootScope.$broadcast you may try to use $rootScope.$emit method. Docs say that $emit sends events upwards while $broadcast sends them downwards. So, with the former one the event will be accessible only on $rootScope and will not be propagated to its children. You can find more information about these methods in official docs or, for example, in this question.

    I think, that it might be also possible to use regular callbacks instead of events. You may try in add a method like addTickEvenListener to the service and call only registered callbacks on every timer tick. I'm not sure, but it may be slightly problematic to remove event listeners when a directive destroys. Probably, this problem may be solved by listening to $destroy event of the scope like it is explained here.