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挂钩等待第一次更改，如果发生了更改，则使用$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));
  }
}

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

Answer 1

$ translate.instant（）不知道翻译可能没有完全加载。

根据documentation：

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

因此，如果您不依赖于$ translate.instant（），您还可以使用翻译过滤器（内部使用手表），如下所示：

<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

Answer 2

考虑尝试使用$onInit代替$onChanges。从文档中可以看出：

$ onInit（） - 在构造了元素上的所有控制器并初始化其绑定之后（在此元素上的指令的pre＆amp; post链接函数之前），在每个控制器上调用。这是为控制器放置初始化代码的好地方。

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);
  };
};

请参阅：http://plnkr.co/edit/5T90efhcnaQoEGoLY1gZ?p=preview

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

2 个答案: