javascript - $translate.instant 在组件启动时不翻译 AngularJS 组件中的值

Question

与 Angular Translate和 $translate.instant()方法我构建了 AngularJS 的选择组件，可以在语言之间自动切换:

<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 等待第一次更改，如果发生更改，则使用 $timeout 运行 $digest:

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() 不知道翻译可能没有完全加载这一事实。

根据 documentation :

Returns a translation instantly from the internal state of loaded translation.

因此，如果您不依赖 $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