时间间隔后在Angular JS中调用函数

Question

I am trying to refresh a page after showing a successfull message. I tied with many snippets but either it gets refreshed without showing message or vice-versa.

So I thought of Calling the Refresh function after an interval or Trigger again the button click event after some time to get the page refreshed.

Here is the code, How to achieve the above scenario?

JS CODE

$scope.Save = function (data) {
    debugger;
    $http.post($rootScope.WebApiURL + '/updatemanifeststatus');
    var value= $http.get($rootScope.WebApiURL + '/getmanifeststatus' );

        $scope.manifeststatus = data;

        $scope.showstatus = true;
        $scope.alert = { type: 'success', msg: 'Published Successfully.' };
        $(".statusDivPublish").show();

        $scope.Refresh1();

    }

    $scope.Refresh1 = function () {
        //refresh
        $state.go($state.current, {}, { reload: true });
    }
});

HTML Button Call

<div class="col-sm-offset-1">
    <button id="PublishButton" class="btn btn-default shiny " ng-disabled="manifeststatus.enablePublishButton" ng-click="Save(manifeststatus)">Publish</button>
</div>

What I want to do Here is Call the Refresh1() function after a time gap in such a way, the page gets refreshed after showing the message.

Answer 1

I plunkered a bit on your problem and I did not need to use a $timeout to update the model with updated data.

.controller('AController', function(ptth$) {

    var self = this;

    self.time = 'wait for it';

    self.init = function() {
      ptth$.get().then(function(data) {
        self.time = data;
      });
    };

    self.init();

    self.save = function() {
        ptth$.post().then(function() {
          //I use an alert instead of a div we show or hide.
          window.alert('hey, this is real success');
          //You either re-fetch data here and update your model
          //Or you reload after the alert...

          //This example works with a ng-model update, instead of a reload
          self.init();
        }, function() {
          window.alert('this is failure');
        });
    };
})

Eventhough this is not the way I would set up things, this example should illustrate that you do not really need a $timeout or $reload for that matter.

Answer 2

Inject $timeout and do this changes to your JS Code.

$scope.Save = function (data) {
    debugger;
    $http.post($rootScope.WebApiURL + '/updatemanifeststatus');
    var value= $http.get($rootScope.WebApiURL + '/getmanifeststatus' );

        $scope.manifeststatus = data;

        $scope.showstatus = true;
        $scope.alert = { type: 'success', msg: 'Published Successfully.' };
        $(".statusDivPublish").show();

        //Adding a 5 second delay
        $timeout($scope.Refresh1, 5000);

    }

    $scope.Refresh1 = function () {
        //refresh
        $state.go($state.current, {}, { reload: true });
    }
});