AngularJS 中的语言环境过滤器 - 如何补偿渲染延迟？

Question

我使用过滤器编写了一个简单的 i18n 本地化函数，但应用过滤器时存在延迟。在应用过滤器和交换文本之前，用户将短暂看到“{{'formTitle' |i18n}}”。有没有办法解决这个问题？

这是一个代码示例，非常简单且相当常见：

<label for="person_title">{{'formTitle' | i18n}}</label>

angular.module('localization')
.value('localizedTexts', {
    'formTitle': 'Titre '
});

angular.module('localization', [])
.filter('i18n', ['localizedTexts', function (localizedTexts) {
return function (text) {
    if (localizedTexts.hasOwnProperty(text)) {
        return localizedTexts[text];
    }
    return text;
};

Answer 1

考虑使用ng-cloak。引用自the AngularJS doc：

当浏览器加载这个css规则时，所有的html元素 用 ng-cloak 指令标记的（包括他们的孩子） 被隐藏。当 Angular 在 模板的编译它删除了 ngCloak 元素属性， 这使得编译的元素可见。

为了获得最佳效果，必须在头部加载 angular.js 脚本 html文件的部分；或者，CSS规则（上面）必须是 包含在应用程序的外部样式表中。

Answer 2

您也可能对角度翻译感兴趣 - http://pascalprecht.github.io/angular-translate/