Angular 1 指令更新视图缓慢答案

【问题标题】：Angular 1 directive slow to update viewAngular 1 指令更新视图缓慢
【发布时间】：2018-04-23 14:20:06
【问题描述】：

我有一个在启动时有一个加载微调器的屏幕。在这个屏幕上，我有一个将属性传递给指令的控制器。该指令具有基于此属性的 ng-show。

将上述属性设置为 true 后，我希望指令显示内容，并且希望控制器隐藏加载微调器。

发生的事情是，在指令渲染 ng-show 之前，微调器被隐藏了。这会导致闪烁。我希望该指令在我隐藏微调器时完全加载。

这是在控制器中：

showSpinner();
$scope.showContent = true;
hideSpinner();

这是指令初始化器：

<div content-directive show-content="showContent "></div>

这是我将属性传递到我的指令中：

return {
        scope:
        {
            showContent : "="
        }
    };

这是我的指令标记：

<div ng-show="showContent ">
        <div style="width: 100px; height: 100px; background-color:dodgerblue"></div>
</div>

【问题讨论】：

【解决方案1】：

看看在你想要显示的内容的 div 上使用 ng-cloak。来自文档：

ngCloak 指令用于防止 AngularJS html 模板浏览器在其原始（未编译）中短暂显示应用程序加载时的表单。使用该指令来避免 html模板显示引起的不良闪烁效果。

<div ng-cloak ng-show="showContent ">
    <div style="width: 100px; height: 100px; background-color:dodgerblue"></div>
</div>

然后，同样来自文档：

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

【讨论】：