javascript - ng-show 有效，但很快显示两个 div

Question

因此，使用 Angular.js Controller 从数据库中获取结果集，数据是无关的。当结果返回 false(未找到行)时，正确的 div 显示“空!”。

当结果返回true时，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>

Angular Controller :

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 之前，必须先处理模板。 Angular 表达式允许未定义，但仍将其报告为未定义，因此 results! div 的 ng-show 为 false，而 empty! div 的ng-show 是 !false，这是 true。

您可以通过在开始时执行 $scope.categoriesFound = true; 来解决此问题，但在您收到回复之前就会显示结果!。

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