2014-11-02 92 views
4

我在第一次加載時遇到了閃爍的文本問題。如何使用翻譯斗篷修復角度翻譯FOUC問題?

我想我已經在互聯網上找到的所有解決方案,但沒有一次成功......

我的角轉換爲最新的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'); 
      } 
     ]); 

回答

5

您需要提供翻譯你的$ translateProvider配置內,將其定義爲首選語言。

The documentation call this FOUC(未翻譯內容的Flash)。

我嘗試了,當我在翻譯斗篷把一個值,像translate-cloak="any",該.translate-cloak類添加到該標籤,但是當我把唯一的translate-cloak不添加.translate-cloak

請記住,您需要風格的.translate-cloak類。