javascript - 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 :

When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ng-cloak directive are hidden. When Angular comes across this directive during the compilation of the template it deletes the ngCloak element attribute, which makes the compiled element visible.

For the best result, angular.js script must be loaded in the head section of the html file; alternatively, the css rule (above) must be included in the external stylesheet of the application.