12

AngularJS アプリケーションがあります。テキストの翻訳には angular-translate を使用しています。それはうまく機能しますが、最初のページをリクエストすると、翻訳が読み込まれるまで数秒かかり、ページにラベルが表示されます。

http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading#asynchronous-loading_fouc---flash-of-untranslated-contentに関するいくつかの投稿を読みましたが、まだ機能していません。

これは私の翻訳モジュールです:

i18n.js:

'use strict';

/* i18n module */

angular.module('myApp.i18n', ['pascalprecht.translate'])
    .config(['$translateProvider', function ($translateProvider) {

        $translateProvider.preferredLanguage('en');

        //$translateProvider.addInterpolation('$translateMessageFormatInterpolation');


        $translateProvider.useStaticFilesLoader({
          prefix: 'languages/locale-',
          suffix: '.json'
        });
}]);

私のapp.jsメインファイルに含まれています：

'use strict';


// Declare app level module which depends on filters, and services

    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'myApp.i18n', 'myApp.properties', 'angularSpinner', 'ngCookies', 'ngSanitize', 'angularCharts', 'ngProgress', 'angularMoment', 'tmh.dynamicLocale'])
      .config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider, $routeParams) {
4

5 に答える 5

11

ng-cloak は角度のちらつきを防ぐためのものです。あなたが話しているちらつきは、最初の角度のブートストラップが行われた後に実行される非同期リクエストによって引き起こされます。非同期ローダーが実行されている限り、要素のクラスの適用と削除を処理する translate-cloak ディレクティブを使用する必要があります。

于 2014-08-03T13:30:52.467 に答える
3

構成とドキュメントの構成には、小さいながらも重要な違いがあります。

$translateProvider.translations('en', {
    'HELLO_TEXT': 'Hello World!'
});

この変換は、非同期ではなく同期でアプリケーションにロードされます。これを試してみると、うまくいくはずです。

まったく異なるアプローチは、ちらつきキーに ng-cloak をアタッチするか、次のようなことをすることです

<body ng-cloak>

それもうまくいくはずです。静的テキストを実装すると、トレードオフとしてアプリ内から柔軟性が失われるため、パフォーマンスとアプリケーション構成に注意してください...

于 2014-06-02T21:29:19.037 に答える
3

ng-cloak と translate-cloak を適切に組み合わせて動作させるのに苦労している場合は、フィルターの代わりに translate ディレクティブを使用できることを忘れないでください。

<span translate="T.GreetingText"></span>

translate ディレクティブの Api Ref

これは、翻訳を非同期的にロードする私たちにとっては良い解決策でした。

于 2015-09-22T10:38:34.453 に答える