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规则时，所有html元素（使用他们的孩子）用ngCloak指令标记是隐藏的。当AngularJS在期间遇到此指令时编译模板，删除ngCloak元素属性，使编译的元素可见。