CODEWITHSUNDEEP
angularjs
sarah
sarah

Reputation: 247

Adding auto refresh after a particular interval (5 seconds) in angular js

I have a page in which which has multiple tabs. I want to add the feature that the tab is reloaded automatically after a fixed duration. I have the following: 

<uib-tab index="$index + 1" ng-repeat="environmentRegionTab in ctrl.environmentRegionTabs"
         heading="{{environmentRegionTab.environmentRegionName}}"
         select="ctrl.onEnvironmentRegionSelect(environmentRegionTab.id);">
    <div class="panel-body tab-content">
        <div class="alert alert-success" ng-show="ctrl.deployStatus[ctrl.environmentRegion.name].show">
            <strong>Launched deployment with execution id
                {{ctrl.deployStatus[ctrl.environmentRegion.name].id}}</strong>
        </div>

...................

And the following controller: 

export function ServiceDetailController(ecsServiceResponse, teamListResponse, productListResponse, businessSubOwnerListResponse, serviceInstancesResponse, businessOwnerListResponse, EcsService, SecretsService, $location, $stateParams, $uibModal, $scope, $state, $window) {
    'ngInject';
    var self = this;
    var serviceInstanceId;
self.ecsAuthControl = {};
self.initialize = _initialize;
self.clearMessages = _clearMessages();
self.onEnvironmentRegionSelect = _onEnvironmentRegionSelect;

$scope.reloadRoute = function() {
    $state.reload();
};

function _onEnvironmentRegionSelect(serviceInstanceId) {
    self.selectedserviceInstanceId = serviceInstanceId;
    if (serviceInstanceId) {
        $location.search('serviceInstanceId', serviceInstanceId);
        _loadEnvironmentRegion();
    } else {
        $location.search('serviceInstanceId', null);
        _loadSummary();
    }
}

}

I am not able to understand how to add the fixed time duration? I also would like to show a counter ticking down from 5 to 0 after which the page is reloaded. How can I do it? I declared the reload function but I am not able to figure out how to add a fixed timer? Thanks!

Upvotes: 0

Views: 4129

Answers (2)

jesusverma
jesusverma

Reputation: 1745

Here is one of the safest way through which you can achieve the functionality.

Function which does the refresh:-

var poll = function() {
    console.log("polling");
    $scope.doRefresh(); // Your refresh logic
};

Call the poll from StartPollar:

var startPoller = function() {
            if (angular.isDefined(stop)) {
            stopPoller();
           }
    stop = $interval(poll, $scope.intervalTime); //$scope.intervalTime : refresh interval time
 };

If you want to Stop it:

var stopPoller = function() {
        if (angular.isDefined(stop)) {
            $interval.cancel(stop);
            stop = undefined;
            console.log("cancelled poller operation");
        } else {
            console.log("do nothing");
        }
};

Upvotes: 1

Shantanu
Shantanu

Reputation: 3513

Make use of $interval service in angularjs:

$interval(function () {
   $scope.reloadRoute();
}, 5000);

(make sure to pass $interval as a dependency to controller)

Example Plunker

Upvotes: 2

Related Questions