Angular 1指令更新视图速度慢

Question

我有一个屏幕，其中有一个加载微调器在启动。在这个屏幕上，我有一个将属性传递给指令的控制器。该指令有一个基于此属性的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>

Answer 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>

然后，同样来自文档：

当浏览器加载此

规则时，用ngCloak指令标记的所有html元素(包括它们的子元素)都将被隐藏。当AngularJS在模板编译过程中遇到此指令时，它会删除ngCloak元素属性，使编译后的元素可见。

https://docs.angularjs.org/api/ng/directive/ngCloak