条件满足 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重合后立即隐藏元素。