私は$ timeoutを使ってポーリングファクトリを持っていますが、$ timeoutの実行後にコントローラを更新することはできません。

Question

下記の工場とコントローラをご覧ください。私は自分のコントローラーで工場を参照したいと思う。私はコントローラがAPIからの実行カウントにアクセスできるようにしたい。

現時点では、$ timeoutの実行後にコントローラを新しい値で更新できません。

理想的には、コントローラーではなく工場で$タイムアウトを維持したいと考えています。私は、問題は私がタイムアウトでコールバックを持っていないということだと思います、誰かが私を正しい方向に向けることができますか？

工場

angular.module('MyPoller', []).factory('MyPoller', function(
    $http,$filter,$timeout) { 
    var data = { response: {}, calls: 0 }; 

    var poller = function (successCallback) { 
     $http.get('https://jsonplaceholder.typicode.com/posts').then(function (r) { 
      data.response = r.data; 
      data.calls++; 
      successCallback(data); 
      $timeout(poller, 10000); 
     }); 
    }; 

    return { 
     poller: poller 
    }; 
}); 

コントローラ

angular.module('NavBarCtrl', []) 
     .controller('NavBarCtrl', function NavBarCtrl($scope, $document, $window, $dropdown, $modal, $timeout, MyPoller) { 

    var ctrl = this; 

    MyPoller.poller(function(data) { 
     ctrl.numberNewMessages = data.calls; 
    }); 
}) 

Answer 1

あなたはゲッターと工場を使用して$scope.$watch()を使用せずにこれを行うことができます。問題は、callsがプリミティブなので、最初にAngularがプリミティブが変更されることを期待していないため、自動的に変更をチェックしなくなります。代わりに親オブジェクトを参照すると、Angularは自動的に変更を監視します。

angular.module('app', []) 
 
    .factory('dataService', function($timeout) { 
 
    var _data = { 
 
     response: {}, 
 
     calls: 0 
 
    }; 
 
    var service = { 
 
     get data() { 
 
     return _data; 
 
     } 
 
    }; 
 

 
    function incrementCalls() { 
 
     _data.calls++; 
 
     $timeout(function() { 
 
     incrementCalls(); 
 
     }, 2000); 
 
    } 
 

 
    incrementCalls(); 
 
    return service; 
 
    }) 
 
    .controller('ctrl', function($scope, dataService) { 
 
    $scope.data = dataService.data; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    Calls: {{data.calls}} 
 
</div>

アップデート - 上記と同じですが、ゲッター
を使用しなくても大きな問題は、あなたがしたいということである：ここではあなたがこれを行う可能性があります一つの方法を説明するために簡略化した例ですオブジェクトのプリミティブプロパティではなく、サービスから返されたオブジェクトを参照します。オブジェクトを参照することで、自動配線をAngularで取得して変更を監視します。

angular.module('app', []) 
 
    .factory('dataService', function($timeout) { 
 
    var _data = { 
 
     response: {}, 
 
     calls: 0 
 
    }; 
 
    var service = { 
 
     data: _data 
 
    }; 
 

 
    function incrementCalls() { 
 
     _data.calls++; 
 
     $timeout(function() { 
 
     incrementCalls(); 
 
     }, 2000); 
 
    } 
 

 
    incrementCalls(); 
 
    return service; 
 
    }) 
 
    .controller('ctrl', function($scope, dataService) { 
 
    $scope.data = dataService.data; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    Calls: {{data.calls}} 
 
</div>