组件启动时,$ translate.instant不会转换AngularJS组件中的值

Question

使用Angular Translate和$ translate.instant()方法,我构建了AngularJS的select组件,并在语言之间自动切换:

<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>

正如您在Plunker上看到的那样:Angular JS选择自动翻译.问题是它select在我选择第二个选项之前将s选项显示为undefined.然后一切正常,我可以在英语和波兰语的翻译选项之间切换.我甚至尝试用$onChanges挂钩等待第一次更改,如果发生$digest了更改,请运行$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));
  }
}

但是一次又一次,我必须在select中选择第二个选项才能使其正常工作.我错过了什么吗？如果有人会帮助我,我将不胜感激,谢谢你.

Answer 1

$ translate.instant()不知道翻译可能没有完全加载.

根据文件:

立即从加载的翻译的内部状态返回翻译.

因此,如果您不依赖于$ translate.instant(),您还可以使用translate过滤器(内部使用watch),如下所示:

<select ng-model="$ctrl.value"' + 'ng-options="value as (value | translate) for value in $ctrl.values" ' + ' ng-change="$ctrl.onSelect()" ' + '></select>

这里有一个完整的例子:

http://plnkr.co/edit/zmYgiOOVjXCmGprsvOLO?p=preview