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, Mar 20 '18 at 11:23
Possible duplicate of [difference between setTimeout in javascript and $timeout service in angularjs](https://stackoverflow.com/questions/39310992/difference-between-settimeout-in-javascript-and-timeout-service-in-angularjs) — Lucy Stevens, Mar 20 '18 at 16:31

Flemin Adambukulam · Accepted Answer · 2018-03-20T12:01:31.663

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 '18 at 12:01

answered Mar 20 '18 at 11:32

Flemin Adambukulam

853
8
18

`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. – farmlandbee Mar 20 '18 at 11:41
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) – Flemin Adambukulam Mar 20 '18 at 11:43
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 – farmlandbee Mar 20 '18 at 11:47
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 – Flemin Adambukulam Mar 20 '18 at 12:02
Using $timeout Worked! – farmlandbee Mar 20 '18 at 12:08

score 2 · Answer 2 · answered Mar 20 '18 at 11:24

2

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

answered Mar 20 '18 at 11:24

Jyme

332
2
13

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. – farmlandbee Mar 20 '18 at 11:32

score -1 · Answer 3 · answered Mar 20 '18 at 11:54

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.

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

HTML

JavaScript

3 Answers3