Angular.js - $scope not updating from 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);
}

@ $scope.show.data = true; ... $scope.show is not declared before and you are accessing $scope.show.data which will give you undefined error. try to declare it before using it. — JPS
– JPS, Commented Mar 20, 2018 at 11:23
Possible duplicate of difference between setTimeout in javascript and $timeout service in angularjs — Lucy Stevens
– Lucy Stevens, Commented Mar 20, 2018 at 16:31

Flemin Adambukulam · Accepted Answer · 2018-03-20 12:01:31Z

5

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

edited Mar 20, 2018 at 12:01

answered Mar 20, 2018 at 11:32

Flemin Adambukulam

8608 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

farmlandbee Over a year ago

scope.show = true has to be inside the setTimeout function, since after 3 seconds it will then show the content. When I put it inside of the setTimeout Function, it no longer works.

Flemin Adambukulam Over a year ago

ok the setTimeout part can be ignored , but did you checkout the plunker? its working there. please also verify the html file (ng-app, ng-controller etc)

farmlandbee Over a year ago

Yeah, I checked the plunker, it worked when I was changing the scope outside of the setTimeout, but it doesn't work when it is inside of it. It needs to be inside as the table has to render first, which will allow the dataTable() to work

Flemin Adambukulam Over a year ago

Can you try using $timeout, you need to inject it to the controller. I have edited the code. Could you also check the developers console and let me know what error you are getting. It could be something totally unrelated to angularjs. Edited my code to use $timeout

farmlandbee Over a year ago

Using $timeout Worked!

Jyme · Accepted Answer · 2018-03-20 11:24:39Z

2

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

answered Mar 20, 2018 at 11:24

Jyme

3422 silver badges14 bronze badges

1 Comment

farmlandbee Over a year ago

I have added that into the controller, I have added console.log($scope.show.data); $scope.show.data = true; console.log($scope.show.data); to the code and the first shows false and the second true, but it isn't referencing it in the HTML.

Rangamannar · Accepted Answer · 2018-03-20 11:54:23Z

-1

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.

answered Mar 20, 2018 at 11:54

Rangamannar

1744 bronze badges

Collectives™ on Stack Overflow

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

HTML

JavaScript

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JavaScript

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related