12

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

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

There is a small, but important difference in between your configuration and that one in the documentation:

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

This translation is loaded WITH the application synchronous and not asynchronous. If you try this one - it should work.

A total different approach would be to attach ng-cloak to the flickering keys or even do something like

<body ng-cloak>

that should work also. Watch for performance and your application configuration as implementing the static texts removes flexibility from within your app as a trade off...

于 2014-06-02T21:29:19.037 回答
3

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

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

翻译指令的 Api Ref

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

于 2015-09-22T10:38:34.453 回答
0

我使用翻译“翻译默认”的属性解决了这个问题

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

对此

 <span translate="[header].[application].[{{vmHeader.userDataService.config.appName}}]" translate-default="&nbsp;"></span>
于 2017-03-06T09:33:46.340 回答
0

我永远无法让 ng-cloak 解决这个问题。使用preferedLanguage（Pascal 建议）也不是我的选择。

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

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

用法是：

{{'LABEL_USERNAME' | translate  | hideTranslationKey}}
于 2016-03-23T13:05:17.147 回答