AngularJSサービスの更新制御変数

Question

- 今、私は何をする必要があるか

function updateViewService($http, $interval) { 
var change = true; 
var grabTimeStamp = function(){ 
    $http.get('someapi').then(function success(response){ 
     //some logic to change var change according to the response 
} 
$interval(grabTimeStamp, 10000); 
return { refresh: function(){ 
     return change; 
    }}; 
} 

は、コントローラでchangeを返し、また、すぐにサービスchange変更などのコントローラ変数を更新しています。

コントローラ内にあると思われるものは、サービス戻り関数は値を1回だけ返します。だから私は$interval私のコントローラで、コントローラの変数を更新していないサービスを呼び出してみました。

私は多くのコントローラを持っています。そのため、すべてのコントローラを更新する必要があるサービスを1つ作ったのです。

次に、change変数が変更されたときに$rootScope.$broadcastを試しました。コントローラで$scope.$onで放送を聴きようとしましたが、うまくいきませんでした。

if(change === true){ 
    $rootScope.$broadcast('dataChanged',change); 
    change = false; 
} 

これを行うにはどうすればよいでしょうか？

基本的に私は

1. IS-何をしたいのか、要求ごとに10秒を作るサービスを作成し、change変数を更新（完了）

2. コントローラおよび更新するには、この変数を渡しますビュー（基本的にバックエンドにリクエストを行い、新しいデータを取得する{貼り付け}）

ありがとうございました。

Answer 1

サービス内の変更変数が値を変更する時期を知りたい場合は、

これには$scope.$watchを使用できます。

angular.module('app', []); 
 

 
angular.module('app').service('someService', function ($interval, $q) { 
 
    var change = 0; 
 
    
 
    $interval(function() { 
 
    $q.resolve(Math.random()) //some promise, maybe from $http, but for sake of simplicity I will use $q.resolve 
 
     .then(function (result) { 
 
     change = result; //setting change to random value 
 
     }); 
 
    }, 1000); //changes every second 
 
    
 
    return { 
 
    getChange: function() { 
 
     return change; 
 
    } 
 
    }; 
 
}); 
 

 
angular.module('app').controller('Example', function ($scope, someService) { 
 
    $scope.$watch(someService.getChange, function (change) { ///adding watcher on someService.getChange, it will fire when change changes value 
 
    this.change = change; //setting change to controller here you can put some extra logic 
 
    }.bind(this)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script> 
 
<div ng-app="app" ng-controller="Example as Ex"> 
 
    {{Ex.change}} 
 
</div>

イベントは（jsfiddle、スニペットまたはそのような何か）アクションであなたのコードのいくつかの例を共有する気にも動作するはずですが？

Answer 2

簡単なポーリングサービスを作成することができます。これは、指定された間隔で要求を行います。ここで私はそれを行うだろうか。

function updateViewService($http, $timeout) { 
    var grabTimeStamp = function(callback) { 
    return $http.get('someapi').then(function success(response) { 
     //some logic to change var change according to the response 
     return response.data; 
    }); 
    } 

    var poll = function(action, interval) { 
    return $timeout(function() { 
     grabTimeStamp() 
     .then(action) 
     .then(poll.bind(null, action, interval)) 
    }, interval); 
    }; 

    return { 
    grabTimeStamp: grabTimeStamp, 
    poll: poll 
    } 
} 

app.factory('dataService', updateViewService); 

その後、あなたは、このようなコントローラでそれを使用します。

dataService.poll(function(data) { 
    $scope.data.push(data); 
}, 1000); 

デモ：http://plnkr.co/edit/MWBlhJzJUh7UJSCJdfPg?p=info

Answer 3

あなたがイベントを提供ソリューションが動作するはずですが、サービスはコントローラ内に注入されなければならない。サービスは、コントローラの前にAngularによってインスタンス化されなければならない。

.service(function updateViewService($http, $interval, someService) { 
var change = true; 
var grabTimeStamp = function(){ 
$http.get('someapi').then(function success(response){ 
    //some logic to change var change according to the response 
    if(change === true){ 
    $rootScope.$broadcast('dataChanged',change); 
    change = false; 
    } 
} 
$interval(grabTimeStamp, 10000); 

}) 

.controller(function($rootScope, updateViewService){ 
    $rootScope.$on('dataChanged', function(){ 
    //do something 
    }); 
})