angularjs - Angular 翻译(PascalPrecht)如何避免在翻译前加载文本标签

Question

我有一个 AngularJS 应用程序。对于文本翻译，我使用 Angular 翻译。它工作得很好，但是当我请求第一页时，在加载翻译前几秒钟，页面会显示标签。

我已经阅读了一些关于它的帖子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) {

Answer 1

ng-cloak 用于防止 Angular 闪烁，您所说的闪烁是由初始 Angular 引导完成后执行的异步请求引起的。您应该使用 translate-cloak 指令，该指令负责在元素上应用和删除类，只要有异步加载器正在运行。