吴-展示作品，但同时快速显示两个div。

Question

因此，使用Angular.js控制器从数据库中获取一个结果集，数据是无关的。当结果返回false (没有找到行)时，正确的div显示“空！”。

当结果返回为真时，div“空！”显示一秒，然后显示“结果！”显示。这种行为让我想起了jQuery .hide()，我把我的代码放在下面，但是我仍然不知道为什么会发生这种行为？

HTML：

<h1 class="page-header">
    Products 
    <small>
        <i class="fa fa-angle-double-right text-primary"></i> add
    </small>
</h1>

<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <div ng-show="categoriesFound">results!</div>
        <div ng-show="!categoriesFound">empty!</div>
    </div>
</div>

角控制器：

mbpApp.controller('ProductsCtrl', function(httpService, $scope) {
    httpService.productCategoriesFindAll().then(function(d) {
    $scope.data = d;

        if(d.status) {
            $scope.categoriesFound = true;
        } else {
            $scope.categoriesFound = false;
        }
  });
});

Answer 1

这是因为在设置$scope.categoriesFound之前，必须对模板进行处理。角表达式允许未定义，但仍将其报告为未定义，因此results! div的ng-show为false，empty! div的ng-show为!false，这是正确的。

您可以在开始时执行$scope.categoriesFound = true;来解决这个问题，但是在您返回响应之前，这将显示results!。

相反，您可以做的是添加另一个变量(类似于categoriesLoading)，在发出请求时将其设置为true，并在模板中添加条件以显示某种加载指示符。当请求完成并被处理时，将其设置为false，然后填充categoriesFound变量。