AngularJS: How to implement Live TimeAgo filter?

Question

I would like to have AngularJS filter timeAgo that should be applied for a timestamp to show time passed from timestamp. That's an easy one:

filter('timeago', function() {
  return function(input) {
    return Date.now() - input;
  }
});

But when I wanted to make it LIVE(when user on the page - we update the value each second/each digest) it appeared to be not that easy. We don't change input value, so filter is not recalculated. Is it possible to make it recalculable each second without adding extra parameters?

Fiddle example.

I'm not looking for ready libraries (like angular-moment). It's more interesting for me how to implement such concept in AngularJs.

Can you explain why u want to make such filter not a directive? Are there any other example of usage? — Petr Averyanov
– Petr Averyanov, Commented Feb 10, 2017 at 10:42

maurycy · Accepted Answer · 2017-02-10 12:02:07Z

1

It happens because the filters are now stateless, to make it work for this filter you will need to do:

function timeagoFilter(input) {
  return Date.now() - input;
}

timeagoFilter.$stateful = true;

return timeagoFilter;

but personally I'd turn it into a directive and change the value with plain javascript - if it's just for display purposes - since it's easy to mess up digest cycle and make the app performance degrade

answered Feb 10, 2017 at 12:02

maurycy

8,4201 gold badge30 silver badges44 bronze badges

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

5 Comments

Stepan Suvorov Over a year ago

great! that's what I was looking for

Petr Averyanov Over a year ago

this filter wont work if your digest takes more than ~1ms. Actually it ends with $rootScope:infdig error.

maurycy Over a year ago

@PetrAveryanov I think you did something wrong if you got infinite digest error

Petr Averyanov Over a year ago

no it is quite obvious 1st digest filter return i.e.10. Second digest - 11. Third 12. Etc. Values are never same. >> error

maurycy Over a year ago

You might be confusing few things and what digest does

Collectives™ on Stack Overflow

AngularJS: How to implement Live TimeAgo filter?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related