Как создать синглтон сервис для таймера в angularjs?

Question

Я делаю проект в angularjs (1.x).Мое требование состоит в том, чтобы мне нужно было подсчитать количество прошедших секунд.

Для этого я написал код с использованием службы $ interval в моем контроллере, который работает отлично.

Теперь, так какэтот код используется многими объектами, поэтому я решил сделать его единичным.Как мы можем это сделать?

Ниже мой код внутри контроллера:

scope.timeDiff = 0;
 var intervalId = $interval(function(){
           scope.timeDiff += 1000; 
        },1000);

 scope.$on('$destroy',function(){
           $interval.clear(intervalId);
 });

Я попытался создать службу таймера следующим образом:

angular.module('myModule').factory('customTimer', ['$interval','$rootScope',
  function ($interval,$rootScope) {
     var timerId, defaultInterval = 1000;     
     return {
       startTimer: function (timeDiff) {
        $interval(function(){
           timeDiff += 1000;
        },1000);
        return timeDiff;
       }
     };
}]);

Изатем я пытаюсь вызвать эту службу в моем контроллере следующим образом:

scope.timeDiff = customTimer.startTimer( scope.timeDiff);        
console.log( "new timediff:",scope.timeDiff );

Пока timeDiff обновляется в моей службе таймера, но контроллер всегда получает 0. В чем может быть причина?

Answer 1

Во-первых, угловая служба и фабрика уже одиночные.

Единственная проблема - это проблема синхронизации.

Это асинхронный вызов, поэтому вы должны убедиться в этом с помощью обратного вызова или обещания.

В контроллере добавьте следующие методы:

$scope.callback = function(retTime) {
  console.log( "new timediff:",retTime);
}
$scope.timeDiff = customTimer.startTimer( scope.timeDiff, $scope.callback);   

$scope.$on('$destroy',function(){
       customTimer.stopTimer();
}); 

Фабрика может быть записана следующим образом:

angular.module('myModule').factory('customTimer', ['$interval','$rootScope',
  function ($interval,$rootScope) {
     var timerId, defaultInterval = 1000;     
     return {
       startTimer: function (timeDiff, callback) {
        timerId = $interval(function(){
           timeDiff += 1000;
        // This if block will ensure your controller callback called after the value of time diff is updated.
           if(callback) {
              callback(timeDiff)
           }
        },1000);
        return timeDiff;
       },
       stopTimer: function () {
         $interval.cancel(timerId);
       }
     };
}]);

Угловая служба может быть записана следующим образом:

angular.module('myModule').service('customTimer', ['$interval','$rootScope',
  function ($interval,$rootScope) {
     var self = this;
     self.defaultInterval = 1000;     

       self.startTimer = function (timeDiff, callback) {
        self.timerId = $interval(function(){
           timeDiff += 1000;
        // This if block will ensure your controller callback called after the value of time diff is updated.
           if(callback) {
              callback(timeDiff)
           }
        },1000);
        return timeDiff;
       }
       self.stopTimer = function () {
         $interval.cancel(self.timerId);
       }

}]);