来自工厂的角度观察异步数据

时间:2016-08-24 10:35:04

标签: angularjs asynchronous watch

我有一项服务来获取我的数据异步并在控制器中设置一个引用:

$scope.myData = 0;
$scope.myData = MyService.getData();

现在我需要检测myData是否已更改。我试过了:

$scope.$watch("myData", function (newValue, oldValue) {
   console.log($scope.myData);
});

但它只调用一次而不是异步完成之后。

1 个答案:

答案 0 :(得分:0)

您的getData功能只会被调用一次。

$watch也接受一个函数作为第一个参数。 (参见文档here)。然后,您可以获取该函数中的数据。返回的值将在$watch回调中提供。

请查看下面的演示或此fiddle

这是一个模拟异步的简单计数器示例。功能

angular.module('demoApp', [])
	.factory('dataService', dataService)
	.controller('mainController', MainController);
  
  
function dataService($interval) {
	var intPromise;
  var factory = {
  	counter: 0,
  	start: function() {
    	if (angular.isUndefined(intPromise)) {
      	intPromise = $interval(factory.run, 1000);
      }
    },
    run: function() {
    	factory.counter++;
    },
    getCounter: function() {
    	return factory.counter;
    }
  };
  
  return factory;
}

function MainController($scope, dataService) {
	$scope.debug = [];
  dataService.start();
  
	$scope.$watch(function() {
  	//return dataService.getCounter();
    return dataService.counter;
  }, function(newValue) {
  	$scope.debug.push("counter changed: " + newValue); 
  }); //,true);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">

  <ul>
    <li ng-repeat="info in debug">{{info}}</li>
  </ul>
</div>