在Angular中,有没有办法防止包含连接值的表达式中的闪烁？

Question

有没有办法防止包含连接值的模板闪烁{{person.LastName+ ", " + person.FirstName}}？

我不想看到","直到$scope.person受到约束.

这是我可能放入过滤器的东西吗？你会为这个微不足道的东西创建一个过滤器吗？

Answer 1

您可以使用ngCloak指令.来自文档:

ngCloak指令用于防止浏览器在加载应用程序时以原始(未编译)形式短暂显示Angular html模板.使用此指令可避免html模板显示导致的不良闪烁效应.

如果只有一个值(例如person.LastName),则ngCloak可以工作,但如果表达式中包含",",则在绑定person对象之前,逗号会自动呈现一段时间. (2认同)

Answer 2

你可以简单地使用ng-show它.我已经创建了一个演示来显示结果. http://plnkr.co/edit/ZAC8RzagPYmLHgXcPazW?p=preview

我在控制器中使用了2秒的超时,因此如果删除ng-show,您可以看到闪烁.

Answer 3

您可以在包装器标签中使用"ng-bind"属性,而不是这样:

<span>{{person.LastName+ ", " + person.FirstName}}</span>

你可以这样做:

<span ng-bind="person.LastName + ', ' + person.FirstName"></span>

仅当值正确连接时,才会更改标记文本.