bugfix> angularjs > 投稿

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を取得しています。理由は何でしょうか。

回答 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);
           }
    }]);
    
    

あなたの答え