javascript - 翻译斗篷不适用于部分加载器

标签 javascript angularjs angular-translate

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

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

这是我的设置

配置

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

Controller

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:我尝试创建一个 fiddle ,但出于某种原因,没有请求 json 文件。

最佳答案

这在 Angular 翻译文档中称为“未翻译内容的闪光”。您可能想检查一下 here .

基本上,您需要定义至少一种要同步加载的语言。因此,继续在 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!'
  });
}])

关于javascript - 翻译斗篷不适用于部分加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26167295/

相关文章:

javascript - 文本区域未验证 Bootstrap 选项卡

javascript - jquery 更改当前行类

javascript - 如何在滚动时使用 Jquery 颜色变化效果时保持 'hover' 效果

angularjs - 如何在 gulp-inject js 文件中添加自定义订单

javascript - GitHub 页面上的 AngularJS html5mode 支持

javascript - AngularJS 使用 UI Router 进行翻译

javascript - 为什么 let 不比 var 慢?

javascript - API调用后的 Angular 回调

AngularJS:在应用程序引导后设置 $routeProvider?

javascript - Angular 翻译功能未按预期工作