Question

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

我不希望看到“，”，直到$scope.person被绑定。

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

Answer 1

您可以使用ngCloak指令。来自文档：

ngCloak指令用于阻止Angular html模板来自浏览器的原始（未编译）短暂显示在您的应用程序加载时表单。使用此指令可以避免由html模板显示引起的不良闪烁效应。

Answer 2

您只需使用ng-show即可。我已经创建了一个演示来显示结果。 http://plnkr.co/edit/ZAC8RzagPYmLHgXcPazW?p=preview

我在控制器中使用2秒的超时时间，如果你删除了ng-show，你可以看到闪烁。

Answer 3

你可以使用＆＃34; ng-bind＆＃34;你的包装器标签中的属性，而不是这个：

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

你可以这样做：

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

仅在正确连接值时才会更改标记文本。

Answer 4

有一些关于ng-cloak的问题所以我使用了普通的旧css：

<div class="digits" style="display:none;">

在控制器上：

document.querySelector('.digits').style.display = 'block';

Answer 5

这是因为您不是从<head></head>部分加载角度js lib。如果对您来说不是什么大问题，只需在头部移动角度<script>标记即可停止闪烁。