Angular -translate (PascalPrecht), как избежать загрузки текстовых меток перед переводом

У меня есть приложение AngularJS. Для текстовых переводов Im с использованием 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) {

Ответ 1

ng-cloak предназначен для предотвращения мерцания angular, мерцание, о котором вы говорите, вызвано асинхронным запросом, который выполняется после начальной начальной загрузки angular. Вы должны использовать директиву translate-cloak, которая заботится о применении и удалении класса на элементе, если работает асинхронный загрузчик.

Ответ 2

Существует небольшое, но важное различие между вашей конфигурацией и тем, что указано в документации:

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

Этот перевод загружен С помощью приложения синхронно, а не асинхронно. Если вы попробуете это - он должен работать.

Совсем другой подход состоял в том, чтобы прикрепить ng-cloak к мерцающим клавишам или даже сделать что-то вроде

<body ng-cloak>

который также должен работать. Следите за производительностью и конфигурацией вашего приложения, поскольку реализация статических текстов удаляет гибкость из вашего приложения в качестве компромисса...

Ответ 3

Если вы пытаетесь получить правильную комбинацию ng-cloak и translate-cloak для работы, не забывайте, что вместо фильтра вы можете использовать директиву трансляции:

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

Api Ref для директивы перевода

Это было приятное решение для нас, поскольку мы загружаем наши переводы асинхронно.

Ответ 4

Я никогда не смогу сделать ng-cloak для этой проблемы. Также не было выбора предпочтительного языка (как предложено Паскалем) для меня.

Поэтому я решил это, добавив кумулятивный фильтр, который скрывает ключи.

    servicesModule.filter('hideTranslationKey', function() {
      return function(input) {
        if(input.indexOf("_") == -1)
          return input;
        return "";
      };
    });

использование:

{{'LABEL_USERNAME' | translate  | hideTranslationKey}}

Ответ 5

Я решил эту проблему, используя атрибут translate "translate-default" из этого

 <span translate="[header].[application].[{{vmHeader.userDataService.config.appName}}]"></span>

к этому

 <span translate="[header].[application].[{{vmHeader.userDataService.config.appName}}]" translate-default="&nbsp;"></span>