CODEWITHSUNDEEP
javascriptangularjs
farmlandbee
farmlandbee

Reputation: 415

Angular.js - $scope not updating from setTimeout()

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);
}

Upvotes: 4

Views: 1325

Answers (3)

Flemin Adambukulam
Flemin Adambukulam

Reputation: 860

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

Upvotes: 5

Rangamannar
Rangamannar

Reputation: 174

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.

Upvotes: -1

Jyme
Jyme

Reputation: 342

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

Upvotes: 2

Related Questions