javascript - AngularJS 将值加载到 ng-if 指令的时间

Question

我在元素上使用了一些 ng-if 指令，同时正在加载有关它们的详细信息。这样我就可以在元素值未定义时向用户显示加载程序图形。当值被定义时，ng-if 等于 false 并隐藏自身。

接下来的另一个 ng-if 等于 true，它会查找被实例化为某个值的值。

<span ng-if="signboard.activeSlideshowId && signboard.activeSlideshowId!=0 && signboard.activeSlideshowId!='failed' && signboard.activeSlideshowName!='failed'"><a href="#/slideshows/{{ signboard.activeSlideshowId }}">{{ signboard.activeSlideshowName }}</a></span>
<span ng-if="signboard.activeSlideshowId==undefined"><i class="fa fa-spin fa-spinner"></i></span>
<span ng-if="signboard.activeSlideshowId=='failed' || signboard.activeSlideshowName=='failed'" class="text-warning">Failed</span>
<span ng-if="signboard.activeSlideshowId==0">No Active Slideshow</span>

此 ng-if 中的值需要一些时间才能填充，在一些值得注意的时刻将空格留空。我只能认为 ng-if 将这些新元素添加到 dom 中，并且只有在 $scope.$apply() 的以下内部运行中，这些值才会在 UI 中更新。

如何才能使这些过渡对用户来说更加平滑，以便在显示的元素之间没有太多时间。我选择 ng-if 而不是 ng-show，因为页面将包含一个项目列表，并且每列都包含一个需要通过异步调用单独填充的值。我的印象是，页面上太多 ng-show/ng-hide 调用确实会影响性能。

Answer 1

您可以将 ngHide 与 one time binding 一起使用:

<span ng-hide="::signboard.activeSlideshowId"><i class="fa fa-spin fa-spinner"></i></span>