$translate.instant does not translate values in AngularJS component when component starts
Solution 1
$translate.instant() isn't aware of the fact that the translation might not be loaded completely.
As per documentation:
Returns a translation instantly from the internal state of loaded translation.
So if you don't rely on $translate.instant() you could also use the translate filter (which uses a watch internally) as follows:
<select ng-model="$ctrl.value"' + 'ng-options="value as (value | translate) for value in $ctrl.values" ' + ' ng-change="$ctrl.onSelect()" ' + '></select>
A complete example can be found here:
http://plnkr.co/edit/zmYgiOOVjXCmGprsvOLO?p=preview
Solution 2
Consider having a try of $onInit
instead of $onChanges
. As from the documentation:
$onInit() - Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.
this.$onInit = function() {
this.values = this.elements;
this.value = this.currentValue;
this.onSelect = function() {
this.onChange({
value: this.value
});
};
this.translate = function(key) {
return $translate.instant(key);
};
};
See: http://plnkr.co/edit/5T90efhcnaQoEGoLY1gZ?p=preview
Radek Anuszewski
Software developer, frontend developer in AltConnect, mostly playing with AngularJS and, recently, BackboneJS / MarionetteJS. I have a blog on Medium.com, where I am writer in Frontend Weekly.
Updated on June 19, 2022Comments
-
Radek Anuszewski about 2 years
With Angular Translate and $translate.instant() method I built AngularJS's select component with automatic switching between languages:
<translated-select elements="$ctrl.values" current-value="$ctrl.value" on-change="$ctrl.setValue(value)" ></translated-select> {{ $ctrl.value }} <hr> <button ng-click="$ctrl.switchToPolish()"> Switch to polish </button> <button ng-click="$ctrl.switchToEnglish()"> Switch to english </button>
As you can see on Plunker: Angular JS select with automated translations. Problem is that it shows
select
s options as undefined until I choose second option. Then everything works, and I can switch between english and polish translations of options. I tried even wait for first change with$onChanges
hook and if change occurred run$digest
with$timeout
:this.$onChanges = function (changes) { if (changes.elements) { $timeout(function () { this.values = changes.elements.currentValue; }.bind(this)); } if (changes.currentValue) { $timeout(function () { this.value = changes.currentValue.currentValue; }.bind(this)); } }
But again and again, I have to choose second option in select to make it work. Am I missing something? I would be grateful if anybody will help me, thank you in advance.