4

我正在尝试将翻译部分加载集成到我的应用程序中，但是翻译文件的初始加载（更改状态时）会闪烁。我translate-cloak按照建议使用，但我仍然得到相同的效果。

注意闪烁仅在更改部分而不是语言时发生。

这是我的设置

配置

app.config(['$translateProvider', function($translateProvider){
  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: 'dist/locales/{lang}/{part}.json'
  });
  $translateProvider.preferredLanguage('en-US');
}])

控制器

app.controller('appCtrl', function($translate, $translatePartialLoader){
  $translatePartialLoader.addPart('app');
  $translate.refresh()
});

模板

<div translate="HEADLINE"></div>

布局

<html ng-app="app" >
  <head>
    <title>SportProphecy</title>
    <script src="/dist/js/vendors.min.js"></script>
    <script src="/dist/js/app.min.js"></script>
  </head>
  <body ui-view ng-cloak translate-cloak>
  </body>
</html>

我错过了什么吗？我已经阅读了所有关于translate-cloak.

PS：我尝试创建一个小提琴，但由于某种原因json没有请求文件。

4

2 回答 2

3

这在角度翻译文档中被称为“未翻译内容的 Flash”。您可能想在这里查看。

基本上，您需要定义至少一种同步加载的语言。因此，继续在 app.config 中为您的首选语言（在您的情况下为“en”）添加翻译

app.config(['$translateProvider', function($translateProvider){
  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: 'dist/locales/{lang}/{part}.json'
  });

  $translateProvider.preferredLanguage('en-US');

  $translateProvider.translations('en-US', {
    'HEADLINE': 'My Fancy App!'
  });
}])
于 2015-09-25T15:26:14.507 回答
0

svikasg完全正确。尽管作为一种解决方法，您可以在控制器中执行以下操作：

$translatePartialLoader.addPart('my-part'); //this should be already in your controller

var vm = this;
function updateCloak () {
    vm.cloak = $translate.instant('some_translation_id') === 'some_translation_id';
}   
$rootScope.$on('$translateLoadingEnd', function () {
   $timeout(updateCloak);
});
updateCloak();

然后在您使用翻译的页面容器中添加一个ng-if="ctrl.cloak". 如果您愿意，也可以使用 ng-class。

当然你也需要注入$rootScope, $translate, $timeout你的控制器。

只要预期的翻译不可用，此代码就会将 cloak 范围属性设置为 true，从而允许您使用与正在检查的文件相同的文件中的翻译隐藏部分。

注意：如果您不使用 controllerAs 语法，请将所有vm引用替换为范围并ctrl.从ng-if.

于 2015-10-01T12:05:52.883 回答