web-dev-qa-db-ja.com

$ 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選択 。問題は、2番目のオプションを選択するまで、selectsオプションが未定義として表示されることです。その後、すべてが機能し、オプションの英語とポーランド語の翻訳を切り替えることができます。 $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で2番目のオプションを選択する必要があります。私は何かが足りないのですか？誰か助けていただければ幸いです、よろしくお願いします。

javascriptangularjsinternationalizationangular-translateangularjs-components
8
Radek Anuszewski

$ translate.instant（）は、翻訳が完全にロードされていない可能性があるという事実を認識していません。

ドキュメント ：

ロードされた翻訳の内部状態から即座に翻訳を返します。

したがって、$ 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

7
d.h.

$onInitの代わりに $onChanges を試してみることを検討してください。ドキュメントから：

$ onInit（）-要素上のすべてのコントローラーが構築され、バインディングが初期化された後（および、この要素のディレクティブのリンク前後の関数の前に）、各コントローラーで呼び出されます。これは、コントローラーの初期化コードを配置するのに適した場所です。

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

2
JcT