Rob*_*ber 12 angularjs angular-translate
我有一个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) {
Pas*_*cht 11
ng-cloak用于防止角度闪烁,您所谈论的闪烁是由初始角度引导完成后执行的异步请求引起的.您应该使用translate-cloak指令,该指令负责在元素上应用和删除类,只要有异步加载器在运行即可.
您的配置与文档中的配置之间存在微小但重要的差异：
$translateProvider.translations('en', {
'HELLO_TEXT': 'Hello World!'
});
此翻译与应用程序同步加载，而不是异步加载。如果你尝试这个 - 它应该有效。
一种完全不同的方法是将 ng-cloak 附加到闪烁的按键上，甚至做类似的事情
<body ng-cloak>
那也应该有效。请注意性能和应用程序配置，因为实现静态文本会消除应用程序内的灵活性，这是一种权衡...