Eugeny89 Eugeny89 - 11 months ago 43
AngularJS Question

Angular JS : why {{ | date:'dd.MM.yyyy HH:mm'}} takes much time?


tab of Chrome dev tools (I'm using
AngularJS Batarang
(Stable)). I have the following lines, describing which watch expressions took the highest time to evaluate (if an expression called several times, the evaluation time is added)

{{ | date:'dd.MM.yyyy HH:mm'}} | 20.1% | 1009ms
{{ | date:'dd.MM.yyyy, HH:mm'}} | 22.8% | 1148ms

The question is why such an evaluation takes so much time?

Answer Source

I think it's "normal" for Angular because Angular runs every single filter (including the date filter) twice per $digest cycle once something has changed. This takes it's toll on the performance. The first run is from the $$watchers detecting any changes, the second run is to see if there are further changes that need updated values.

If you can change your DOM filter:

{{ | date:'dd.MM.yyyy HH:mm'}}

to use a $filter provider, which you can use to run filters in your controller before parsing them into the DOM you preprocess your data before sending it to the view, which avoids the step of parsing the DOM and understanding the inline filter syntax:

$scope.theDate = $filter('date')(, 'dd.MM.yyyy HH:mm');