我在第一次加载时出现文本闪烁的问题.
我尝试了我在互联网上找到的所有解决方案,但没有一个能够工作……
我的angular-translate版本是最新的2.4.2.
这是HTML示例：
<!DOCTYPE html>
<html ng-app="testapp">
<head>
<title translate-cloak>{{ 'page.appName' | translate }}</title>
<base href="/">
<Meta charset="utf-8">
<link rel="icon" type="image/ico" href="static/favicon.ico"/>
<link rel="stylesheet" href="stylesheets/style.css"/>
</head>
<body>
<div>
<ul>
<li>
<div>
<a href="/"><strong translate-cloak>{{ 'page.appName' | translate }}</strong></a>
</div>
</li>
</ul>
</div>
<div ng-view></div>
<script src="javascripts/angular.js"></script>
<script src="javascripts/angular-translate.js"></script>
<script src="javascripts/angular-translate-loader-url.js"></script>
<script src="javascripts/angular-translate-loader-static-files.js"></script>
<script src="javascripts/angular-translate-storage-local.js"></script>
<script src="javascripts/test.js"></script>
</body>
</html>
这是JavaScript：
angular.module('testapp',['ngRoute','ngResource','ngCookies','ngTable','mgcrea.ngStrap','pascalprecht.translate'])
.config(['$locationProvider','$routeProvider','$httpProvider','$translateProvider',function ($locationProvider,$routeProvider,$httpProvider,$translateProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/',{
templateUrl: 'views/main.html'
}).otherwise({
redirectTo: '/'
});
$translateProvider.useSanitizeValueStrategy('escaped').useLocalStorage().useStaticFilesLoader({
prefix: 'static/languages/',suffix: '.json'
}).use('en-EN');
}
]);
解决方法
您需要在$translateProvider配置中提供翻译并将其定义为首选语言.
The documentation call this FOUC(未翻译内容的Flash).
我也试验过,当我在translate-cloak中添加一个值时,比如translate-cloak =“any”,.translate-cloak类被添加到标签中,但是当我只放入translate-cloak时,.translate-cloak isn’补充说.
请记住,您需要设置.translate-cloak类的样式.
