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

使用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 with automated translations。问题在于，在我选择第二个选项之前，它将select的选项显示为未定义。然后一切正常，我可以在选项的英语和波兰语翻译之间切换。我什至尝试使用$onChanges钩子(Hook)等待第一次更改，如果发生更改，请使用$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中选择第二个选项以使其起作用。我想念什么吗？如果有人能帮助我，我将不胜感激，在此先感谢您。

最佳答案

$ translate.instant()不知道翻译可能未完全加载的事实。

根据documentation:



因此，如果您不依赖$ translate.instant()，则还可以如下使用翻译过滤器(内部使用 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

关于javascript - $ translate.instant不会在组件启动时转换AngularJS组件中的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39440292/