AngularJS hide div after delay

Question

While creating my app in AngularJS (awesome framework!) I stuck in one task: how to show and hide hidden div (ng-show) after some action.

Detailed description: using AngularUI $modal service I'm asking if user wants to perform action, if yes, I run service to POST request via $http to send which item I want to delete. After it finished I want to show hidden div with information, that process has accomplished successfully. I created a simple service with $timeout to set div's ng-show and hide after some time but it doesn't update variable assigned to ng-show directive. Here is some code:

Controller for listing and deleting items

 $scope.deleteSuccessInfo = false; //variable attached to div ng-show

 $scope.deleteCluster = function(modalType, clusterToDelete) {

    modalDialogSrvc.displayDialog(modalType)
        .then(function(confirmed) {

            if(!confirmed) {
                return;
            }

            clusterDeleteSrvc.performDelete(itemToDelete)
                .then(function(value) {
                    //my attempt to show and hide div with ng-show
                    $scope.deleteSuccessInfo = showAlertSrvc(4000);
                    updateView(itemToDelete.itemIndex);
                }, function(reason) {
                    console.log('Error 2', reason);
                });

        }, function() {
            console.info('Modal dismissed at: ' + new Date());
        });
};

function updateView(item) {
   return $scope.listItems.items.splice(item, 1);
}

Part of service for deleting item

function performDelete(itemToDelete) {

    var deferred = $q.defer(),
        path = globals.itemsListAPI + '/' + itemToDelete.itemId;

    getDataSrvc.makeDeleteRequest(path)
        .then(function() {
            console.log('Item removed successfully');
            deferred.resolve({finishedDeleting: true});
        }, function(reason) {
            console.log('error ', reason);
            deferred.reject(reason);
        });

    return deferred.promise;
}

return {
    performDelete: performDelete
};

Simple service with $timeout to change Boolean value after some time

angular.module('myApp')
    .service('showAlertSrvc', ['$timeout', function($timeout) {

        return function(delay) {

            $timeout(function() {
                return false;
            }, delay);

            return true;
        };

    }]);

I tried $scope.$watch('deleteSuccessInfo', function(a, b) {...}) with no effect. How to apply false after some delay? Or maybe You would achieve this in other way?

Thank You in advance for any help!

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Change the implementation of the showAlertSrvc service, like this:

angular.module('myApp')
 .service('showAlertSrvc', ['$timeout', function($timeout) {
        return function(delay) {
            var result = {hidden:true};
            $timeout(function() {
                result.hidden=false;
            }, delay);
            return result;
        };
    }]);

And then change thes 2 lines:

The declaration of deleteSuccessInfo should be like this:

 $scope.deleteSuccessInfo = {};

And then do this:

$scope.deleteSuccessInfo = showAlertSrvc(4000);

And finally in your view do this "ng-show=!deleteSuccessInfo.hidden"

Example

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 30 '14 at 23:00

Josep

12,926
2
42
45

Thank You for the solution Josep. Anyway I was hoping for creating a reusable showAlertSrvc service, which I be able to use easy with other controllers like creating items. – cachaito Oct 30 '14 at 23:06
@cachaito I will updated my answer in order to explain why that service is not worth it, please check my answer in 5 minutes. There is a very good reason for not having that service. – Josep Oct 30 '14 at 23:07
I will wait @Josep :-) Meanwhile I did read $q docs and I discovered a third callback in retunredPromise.then(successCallback, errorCallback, notifyCallback); What would You say to set: $scope.deleteSuccessInfo = true in successCallback and set $timeout with $scope.deleteSuccessInfo = false in notifyCallback? – cachaito Oct 30 '14 at 23:22
@cachaito I changed my mind ;) Check my new answer, and let me know if that it's what you want. Thanks! – Josep Oct 30 '14 at 23:24
May I ask what reason You had for avoid this showAlertSrvc service? – cachaito Oct 30 '14 at 23:27
1

@cachaito 2 things: 1) I just re-updated my answer, sorry, have a look at that please. 2) The reason is because I thought that the implementation of the service would end up being a wrapper of $timeout or falling into a very common anti-pattern the [deferred anti-pattern](http://stackoverflow.com/questions/23803743/what-is-the-deferred-antipattern-and-how-do-i-avoid-it) – Josep Oct 30 '14 at 23:29
@cachaito and yet, another update, sorry ;) (it would have been much easier if you had set a jsFiddle or a Plunker) – Josep Oct 30 '14 at 23:42
Sorry for that inconvenience @Josep :-( – cachaito Oct 30 '14 at 23:45
1

@cachaito ok, check the latest update. I've made this [jsFiddle](http://jsfiddle.net/3pxnLc7j/) to prove that it works. Please let me know if this is what you wanted. Thanks! – Josep Oct 30 '14 at 23:56

AngularJS hide div after delay

1 Answers1

Example