2014-10-02 58 views
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文件沒有被請求。

+0

您是否找到任何解決方案? – Nurdagniriel 2015-03-24 15:35:14

回答

3

這是來自角度翻譯文檔的「未翻譯內容的Flash」。你可能想看看here

基本上,你需要定義至少一種語言來同步加載。所以,儘管在App.config

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!' 
    }); 
}]) 
0

svikasg是完全地正確添加轉換您的首選語言(在你的案件「恩」)。在那裏你正在使用的翻譯添加ng-if="ctrl.cloak"

$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(); 

然後在你的頁面的容器:你的控制器內雖然作爲workarround你可以做以下。如果您願意,也可以使用ng-class。

當然,您還需要在控制器中注入$rootScope, $translate, $timeout

只要預期翻譯不可用,此代碼就會將cloak scope屬性設置爲true,從而允許您在與您正在檢查的文件相同的文件中使用翻譯來隱藏零件。

注意:如果你不使用controllerAs語法替換所有範圍vm引用,並從ng-if刪除ctrl.