javascript - 条件满足 ngShow AND ngHide

Question

我试图在加载数据时显示加载图标，然后在数据准备就绪时显示加载图标。问题是几秒钟后，我可以看到加载图标和数据...

这是我的代码

$scope.items[y].content.push({ text: '', loading: true });

API.getContent(id, x, y, function (response, x, y) {

    $scope.items[y].content[x].loading = false;
    $scope.items[y].content[x].text = response.data.text;
});

我的观点:

<i ng-show="item.loading" class="fa fa-spinner fa-pulse fa-2x"></i>
<p ng-hide="item.loading" class="portal-subtitle" ng-bind-html="item.text"></p>

我的内容是异步加载的。我一得到结果就将加载值设置为false，所以此时图标应该是不可见的……但事实并非如此! (如图所示)。

知道如何解决这个问题吗？

编辑:

我显示了我的“item.loading”的值。看起来当值从 true 变为 false 时，显示了文本，但图标仍然在这里几秒钟...这有帮助吗？

谢谢你的帮助

Answer 1

如果您使用的是 ng-animate，请将其添加到您的 CSS 中:

.ng-hide.ng-hide-animate{display: none !important; }

在 ng-hide 开始之前动画正在等待完成。

上面的 css 会在 ng-hide 和 ng-hide-animate 重合后立即隐藏元素。