CODEWITHSUNDEEP
javascriptangularjs
baynezy
baynezy

Reputation: 7066

Modifying ng-show in a setTimeout

I have a controller like so:-

appControllers.controller("TaskAddController", function ($scope, $http) {
    $scope.task = {};
    $scope.messages = {};

    $scope.actions = {
        save : function() {
            $http.post("/ajax/tasks/save", $scope.task)
            .then(function() {
                $scope.messages.success = true;
                $scope.task = {};

                setTimeout(function () {
                    $scope.messages.success = false;
                }, 3000);
            });
        }
    };
});

The view looks like so:-

<div data-ng-controller="TaskAddController">
    <div data-ng-show="messages.success">Task Added</div>
    <div>
        <input data-ng-model="task.title" type="text" placeholder="Title...."/>
    </div>
    <div>
        <textarea data-ng-model="task.description" placeholder="Description..."></textarea>
    </div>
    <div>
        <input data-ng-click="actions.save()" type="submit" value="add"/>
    </div>
</div>

What I am trying to do is on the completion of the AJAX request I want to show the div containing Task Added, then after 3 seconds have it disappear The first part is working, e.g. the div appears when the AJAX request completes, but even though my setTimeout is definitely happening, the div is not disappearing.

Now from my research I thought it was because I need to get the Angular digest to fire. So I tried the following:-

setTimeout(function () {
    $scope.messages.success = false;
    $scope.apply();
}, 3000);

But that didn't seem to make a difference. What am I missing?

Upvotes: 1

Views: 1755

Answers (1)

Jay Shukla
Jay Shukla

Reputation: 5826

You should use $timeout.

$timeout(function () {
    $scope.messages.success = false;
}, 3000);

Note : You need to inject $timeout in your controller.

Upvotes: 7

Related Questions