Question

我使用angular-translate进行翻译并试图避免使用FOUC。

angular.forEach(translations, function(translation){
  $translateProvider.translations(translation.locale, translation.translations);
});

$translateProvider.preferredLanguage(settings.defaultLocale);

我想在我的一个html

中尝试这样做

<h3 class="xxxx" translate translate-cloak>{{'ITEMS'}}</h3>

但我仍然看到了FOUC的行为。任何想法或建议。当我调试脚本时，我看到事件$ translateLoadingSuccess永远不会被调用，所以即使在页面加载后我的所有元素都是不可见的。

Answer 1

如果你想避免FOUC，你要找的是ng-cloak。你必须像这样添加它：

<body class="{{ bodyClass }}" ng-cloak>

这样可以防止不必要的闪烁。 LINK TO ANGULAR DOCS

Answer 2

我能够使用ng Bind解决问题。然后在控制器中移动了翻译登录

$translate('KEY').then(function(newValue){
    $scope.KEY = newValue;
});

还需要确保使用ngSanitize在app.config中设置

translateLoadingSuccess永远不会被称为angular-translate

2 个答案: