条件符合ngShow和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，因此此时图标应该是不可见的......但它不是！ （如图所示）。

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

编辑：

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

感谢您的帮助

Answer 1

如果您使用的是ng-animate，请将其添加到您的css：

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

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

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