Angular.js - $scope 没有从 setTimeout() 更新答案

【问题标题】：Angular.js - $scope not updating from setTimeout()Angular.js - $scope 没有从 setTimeout() 更新
【发布时间】：2018-03-20 11:00:43
【问题描述】：

这个想法是我在加载数据时显示一个正在加载的 .gif 文件，然后在所有数据加载后，等待 x 时间量，目前为 3000 毫秒，但会降低，然后在给定数量之后时间，将 data.show 的值设置为 true，这样加载的 .gif 就不再显示，而 Table 是。

那么，如何从 HTML 中的 JavaScript ng-show 中引用 show？

任何帮助将不胜感激！

谢谢:)

编辑：这适用于回答 - setTimeout v $timeout

HTML

 <div ng-show="!show">
    <img id="loader" src="resources/ajax-loader.gif">
</div>

<div ng-show="show">
    <div class="ui grid center aligned">
        <div class="column thirteen wide">
            <table id="errorTable" class="ui compact celled definition table">
                <p>Stuff</p>
            </table>
        </div>
    </div>
</div>

JavaScript

function onSuccess(response) {
    controller.errors = response.data;
    setTimeout(function () {
        $('#errorTable').DataTable({
            "lengthMenu": [[6], [6]],
            "dom": '<"toolbar">frtip'
        });
        $("div.toolbar").html('<div class="ui input left floated"><input type="text" placeholder="Search..."></div>');
        $scope.show = true;
    }, 3000);
}

【问题讨论】：

@ $scope.show.data = true; ... $scope.show 之前未声明，您正在访问 $scope.show.data 这会给您未定义的错误。尝试在使用前声明它。
difference between setTimeout in javascript and $timeout service in angularjs的可能重复

标签： javascript angularjs

【解决方案1】：

问题是你一开始没有定义 $scope.show 。您可能不需要 show.data 。请在控制器的开头添加以下行

$scope.show = false;

并将 html 更改为：

 <div ng-show="!show">
    <img id="loader" src="resources/ajax-loader.gif">
</div>

<div ng-show="show">
    <div class="ui grid center aligned">
        <div class="column thirteen wide">
            <table id="errorTable" class="ui compact celled definition table">
                <p>Stuff</p>
            </table>
        </div>
    </div>
</div>

在控制器中：

您已将 $scope.show.data 添加到 setTimeout 之外，根据您的需要将其带入 setTimeout 函数并添加：

function onSuccess(response) {
    controller.errors = response.data;
    $timeout(function () {
        $('#errorTable').DataTable({
            "lengthMenu": [[6], [6]],
            "dom": '<"toolbar">frtip'
        });
        $("div.toolbar").html('<div class="ui input left floated"><input type="text" placeholder="Search..."></div>');
        $scope.show = true;
    }, 3000);
}

Here 是我试过的笨蛋

【讨论】：

scope.show = true 必须在 setTimeout 函数内，因为 3 秒后它将显示内容。当我把它放在setTimeout 函数中时，它不再起作用了。
ok，setTimeout 部分可以忽略，但是你检查了 plunker 吗？它在那里工作。请同时验证 html 文件（ng-app、ng-controller 等）
是的，我检查了 plunker，当我在 setTimeout 之外更改范围时它可以工作，但是当它在其中时它不起作用。它需要在里面，因为表格必须首先呈现，这将允许 dataTable() 工作
你可以尝试使用$timeout，你需要将它注入到控制器中。我已经编辑了代码。您能否还检查开发人员控制台，让我知道您遇到了什么错误。它可能与 angularjs 完全无关。编辑我的代码以使用 $timeout
使用 $timeout 成功了！

【解决方案2】：

尝试在控制器中添加$scope.show = { data: false };

【讨论】：

我已将其添加到控制器中，我已添加 console.log($scope.show.data); $scope.show.data = true;控制台.log($scope.show.data);到代码，第一个显示为假，第二个显示为真，但它没有在 HTML 中引用它。

【解决方案3】：

由于没有div.toolbar，意味着$('div.toolbar') 将是null/undefined，这会导致该语句处出现空指针，并且不会执行下一条语句，因为执行刚刚停止。

简单的解决方案是将$scope.show.data = true; 作为function 调用的setTimeout 中的第一条语句。

【讨论】：