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>

然后，同样来自文档：

当浏览器加载此CSS规则时，所有带有ngCloak指令标记的html元素（包括其子元素）都将被隐藏。 当AngularJS在模板编译期间遇到此指令时，它将删除ngCloak元素属性，从而使编译后的元素可见。