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

Question

我的想法是,我在加载数据时显示加载.gif文件,然后在加载所有数据后,等待一段x时间,当前为3000毫秒,但会降低,然后在给定的时间后,设置值data.show为true,因此加载.gif不再显示,而表格是.

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

任何帮助,将不胜感激!

谢谢 :)

编辑:这适用于此回答 - 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.请在控制器的开头添加以下行

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

在控制器中:

您已经在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);
}

这是我试过的那个傻瓜