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

标签 javascript html css angularjs angularjs-filter

我使用过滤器编写了一个简单的 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;
};

最佳答案

考虑使用 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.

关于javascript - AngularJS 中的语言环境过滤器 - 如何补偿渲染延迟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16986421/

相关文章:

css - 数据表 将 "Previous"& "Next"移到左边

php - 按小数点对齐表格列中的小数数据,HTML5,CSS3

javascript - Reactjs:作为 Prop 访问时未定义的键

javascript - 如何使用 document.write 编写 JavaScript 代码?

html - 如何在新页面上继续 CSS 列表?

javascript - 如何从javascript中的日期输入调用日期选择器?

html - Bootstrap 网格不以平板设备为中心 - 响应式设计

javascript - 向下钻取后无法导出 Highchart.js

Javascript 动态计算,无需提交按钮

css - Firefox 中的高度比 Chrome 中的高