4

翻訳の部分読み込みをアプリに統合しようとしていますが、翻訳ファイルの初期読み込みでちらつきがあります (状態の変更時)。提案どおりに使用translate-cloakしていますが、それでも同じ効果が得られます。

注: ちらつきは、言語ではなく部分的な変更時にのみ発生します。

これが私のセットアップです

設定

app.config(['$translateProvider', function($translateProvider){
  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: 'dist/locales/{lang}/{part}.json'
  });
  $translateProvider.preferredLanguage('en-US');
}])

コントローラ

app.controller('appCtrl', function($translate, $translatePartialLoader){
  $translatePartialLoader.addPart('app');
  $translate.refresh()
});

テンプレート

<div translate="HEADLINE"></div>

レイアウト

<html ng-app="app" >
  <head>
    <title>SportProphecy</title>
    <script src="/dist/js/vendors.min.js"></script>
    <script src="/dist/js/app.min.js"></script>
  </head>
  <body ui-view ng-cloak translate-cloak>
  </body>
</html>

何か不足していますか？に関するすべてのドキュメントを読みましたtranslate-cloak。

PS: フィドルを作成しようとしましたが、何らかの理由でjsonファイルが要求されていません。

4

2 に答える 2

0

svikasgは完全に正しいです。ただし、回避策として、コントローラー内で次のことを行うことができます。

$translatePartialLoader.addPart('my-part'); //this should be already in your controller

var vm = this;
function updateCloak () {
    vm.cloak = $translate.instant('some_translation_id') === 'some_translation_id';
}   
$rootScope.$on('$translateLoadingEnd', function () {
   $timeout(updateCloak);
});
updateCloak();

次に、翻訳を使用しているページ コンテナーにng-if="ctrl.cloak". 必要に応じて ng-class を使用することもできます。

もちろん$rootScope, $translate, $timeout、コントローラーにも注入する必要があります。

このコードは、期待される翻訳が利用できない限りクローク スコープ プロパティを true に設定し、チェックしているファイルと同じファイル内の翻訳を使用してパーツを非表示にできます。

注: controllerAs 構文を使用していない場合は、すべてのvm参照をスコープに置き換えctrl.、ng-if.

于 2015-10-01T12:05:52.883 に答える