Question

我有一个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) {

Answer 1

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

Answer 2

您的配置与文档中的配置之间存在一个小但重要的区别：

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

此转换是在应用程序同步而非异步的情况下加载的。如果你尝试这个 - 它应该工作。

完全不同的方法是将ng-cloak附加到闪烁的键上，甚至做类似的事情

<body ng-cloak>

也应该有用。注意性能和应用程序配置，因为实现静态文本会消除应用程序内部的灵活性，作为权衡...

Answer 3

如果您正努力使ng-cloak和translate-cloak正确组合起作用，请不要忘记您可以使用translate指令而不是过滤器：

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

Api Ref for the translate directive

这对我们来说是一个很好的解决方案，因为我们异步加载我们的翻译。

Answer 4

我永远无法为此问题制作ng-cloak。使用首选语言（由Pascal建议）也不是我的选择。

所以我通过添加一个隐藏密钥的累积过滤器来解决它。

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

用法是：

{{'LABEL_USERNAME' | translate  | hideTranslationKey}}

Answer 5

我使用翻译“translate-default”的属性解决了这个问题从这个

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

到这个

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

angular-translate（PascalPrecht）如何避免在翻译之前加载文本标签

5 个答案: