Question

我正在将Angular-translate与partial-loader结合使用，我希望在页面加载时隐藏翻译键。在 app.js

中

       var app = angular.module('myapp', [
          'ngRoute',
          'appRoutes', 
          'pascalprecht.translate',
          'angularTranslate',
          'indexCtrl'
        ]); 

    angular.module('angularTranslateApp', ['pascalprecht.translate']).config(function($translateProvider) {
        $translateProvider.useLoader('$translatePartialLoader', {
            urlTemplate: 'translation/{lang}/{part}.json'
        });
 $translateProvider.preferredLanguage('en-US');

index.js

angular.module('indexCtrl', []).controller('indexController', 
  function($scope, $translate, $translatePartialLoader) {

    $translatePartialLoader.addPart('test');
    $translate.refresh();

});

test.json

{
"testkey":"testval"
}

HTML

{{ "testkey" || translate }}

所以在页面加载它显示 testkey 几秒钟，我不想显示这个，如何实现这一点。我已经使用了 translate-cloak ，但它无效

Answer 1

静态加载一种语言并将其设置为$translate.preferredLanguage()的首选语言，因此当页面第一次加载时，会立即显示数据。

或者使用$translateChangeSuccess事件将自定义CSS类应用于元素，即默认隐藏它们，并在语言设置正确后立即显示它们。这样您就不会看到翻译键，因为它们最初是隐藏的。

另请参阅this article中有关FOUC的段落。

Answer 2

请你在routeconfig

中解析该页面时尝试一下

    resolve: {
           translatePartialLoader: ['$translate', '$translatePartialLoader', function($translate, $translatePartialLoader) {
                $translatePartialLoader.addPart('test');          
                return $translate.refresh();
           }]
    }

Answer 3

translate-cloak指令需要伴随.translate-cloak{opacity:0}样式。（此样式隐藏内容）。在"translateChangeSuccess"事件$translate服务中删除该类，您可以显示实际值。

隐藏页面加载角度的翻译键

3 个答案: