Angular JS监视服务方法中的数据

Question

So I have a service that gets a json object which is working fine. In my controller, I want to watch that object for any changes. When there is a change in the object, i want that to update on the fly in the UI. Here is my service:

angular.module('vertopsappApp.services', [])
.factory('vertopsappAppAPIservice', function($http) {

var vertopsappAppAPI = {};

vertopsappAppAPI.getDrivers = function() {
  return $http({
    method: 'JSONP',
    url: 'http://faboolis.com/example.json?callback=JSON_CALLBACK'
  });
}

return vertopsappAppAPI;
 });

My controller looks like this but I'm pretty sure its not the way to do this.

 .controller("LineCtrl", function ($scope, vertopsappAppAPIservice) {
   $scope.$watch('vertopsappAppAPIservice.getDrivers()', function (newVal) {
    console.log('data changes into: ', newVal)
   }, true);
 });

any help would be much appreciated. Thanks in advance.

Answer 1

You could try emitting an event from the service when your data changes, and listening to the same in your controller and hence update your model so that the UI changes.

Edit with example :

Inside Service when your data changes:

$rootScope.$emit("value_changed", newValue); //trigger this when you know there is a change in value

Inside controller:

$rootScope.$on("value_changed", function(e,newValue) { $scope.urUIVariable = newValue; });