The binding you are utilizing ({{getWord('Name')}}
) undergoes evaluation during each iteration of the digest loop. When considering the number of getWord
calls on a single page...
To address this issue, consider using a "single-time binding":
<h1 style="text-align: center">{{::getWord('Name')}}</h1>
An expression starting with ::
is recognized as a one-time expression.
One-time expressions cease reevaluation once they stabilize, typically after the first digest if the result is a non-undefined value.
If your intention is to facilitate text rebinding, an alternative approach can be taken:
<h1 style="text-align: center">{{translated.Name}}</h1>
In your controller, populate a $scope.translated
object with all the necessary translations.
You can enable the translation function to be triggered again in case of a language switch, similar to the following:
$scope.translate = function(keys){
someTranslationWebService.get(keys, function(response){
$scope.translated = response;
});
};
keys
can be represented as an array such as:
['Name', 'CompanyName', 'Address']
The expected format for response
is as shown below:
{
"Name": "Recipient's name",
"CompanyName": "Company name",
"Address": "Delivery address"
}
Alternatively, you could explore the use of the "angular-translate" library