Angular.js - $ scope不从setTimeout（）更新

Question

The idea is that I show a loading .gif file while I load the data and then once all the data has loaded, wait an x amount of time, currently 3000ms, but will be lowered, then after the given amount of time, set the value of data.show to true, so that the loading .gif is no longer showing and that the Table is.

So, how do I reference show from the JavaScript in the HTML, ng-show?

Any help would be appreciated!

Thanks :)

edit: This works regarding to this to answer - 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

The problem is you have not defined $scope.show in the beginning. You probably don't need show.data . Please add the following line at the beginning of the controller

$scope.show = false;

And Change html to:

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

And in controller:

You have added the $scope.show.data outside setTimeout bring it within the setTimeout function as per your need and add:

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 is the plunker that I tried

Answer 2

Try adding $scope.show = { data: false }; in the controller

Answer 3

As there is no div.toolbar , meaning, $('div.toolbar') would be null/undefined , which leads to a Null Pointer at that statement and the next statement is not being executed, as the execution has stopped just before.

Simple solution could be to place the $scope.show.data = true; as the first statement in the function called by setTimeout .