javascript - Angular.js - $scope 不从 setTimeout() 更新

Question

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

那么，如何从 HTML 中的 JavaScript 中引用 show，ng-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);
}

Answer 1

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

$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>

在 Controller 中:

您已经在 setTimeout 之外添加了 $scope.show.data，根据您的需要将其带入 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是我试过的plunker