Hi!
I'm creating a big application with lot's of translated data where performance is suffering, so while debugging the bottlenecks with Batarang I found that it would be required to have a bind-translated directive.
Why?
Visibility:
While AngularJS is bootstrapping, the user might see your placed brackets in the html. This can be handled with ng-cloak. But for me this is a workaround, that I don't need to use, if I use ng-bind.
Performance:
The {{}} is much slower.
This ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply, when the passed value does actually change.
The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it's not necessary.
In my experiments, changing from {{}} to strict ng-bind saves around 20~40% in every scope.$digest.
Suggestion:
Use a directive instead of the brackets annotation.
Instead of
use↓
<span bind-translate="Hello"></span>
For example angular-translate does this with the directive ng-translate.
Hi!
I'm creating a big application with lot's of translated data where performance is suffering, so while debugging the bottlenecks with Batarang I found that it would be required to have a bind-translated directive.
Why?
Visibility:
While AngularJS is bootstrapping, the user might see your placed brackets in the html. This can be handled with
ng-cloak. But for me this is a workaround, that I don't need to use, if I useng-bind.Performance:
The
{{}}is much slower.This
ng-bindis a directive and will place a watcher on the passed variable. So theng-bindwill only apply, when the passed value does actually change.The brackets on the other hand will be dirty checked and refreshed in every
$digest, even if it's not necessary.In my experiments, changing from
{{}}to strictng-bindsaves around 20~40% in every scope.$digest.Suggestion:
Use a directive instead of the brackets annotation.
Instead of
use↓
For example
angular-translatedoes this with the directive ng-translate.