javascript - 如何更新 AngularJS 中多个 Controller 共享服务属性的异步模型更改的绑定(bind)？

Question

我有一项用于在多个 Controller 之间共享模型的服务。该模型是异步更新的(在插件的回调中)。我遇到了更新模型并没有更新多个 Controller / View 对上的绑定(bind)的问题。我能想到的实现这项工作的唯一方法是让每个 Controller 向服务传递一个包含 $scope.$apply 的回调函数。每当模型更新时，每个回调都会运行。这对我来说真的很困惑。有更好的方法吗？

这是我的示例代码片段，只有 1 个 Controller 。要记住的重要一点是，触发更改后，您导航到使用共享服务的不同 Controller 的不同页面(因此不会调用 Controller 事件来更新 $scope):

angular.module('myApp', [])

.controller('MyController', ['myServ', function(myServ) {
	var controller = this;
	
	controller.myObject = myServ.myObject;
	
	controller.onChnge = function() {
		myServ.makeChange();
	};
	
}])

.factory('myServ', [function () {
	// Definitions ==============================
	var service = {};
	service.myObject = { value1: 25 };
	
	service.makeChange = function() {
		if (service.myObject.value1 === 25)
			setTimeout(function() { 
				service.myObject.value1 = 10;
			}, 1000);
		else
			setTimeout(function() { 
				service.myObject.value1 = 25;
			}, 1000);
	}
	
	return service;
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
	<div ng-controller="MyController as ctrl">
		Value: {{ ctrl.myObject.value1 }}<br>
		<button ng-click="ctrl.onChange()">Make Change</button>
	</div>
</div>

更新:澄清了异步模型更改的来源。删除了一些不需要的代码位。

Answer 1

不确定这是否是最好的解决方案，但我已经使用 $watch 来做到这一点。

$scope.UserService = UserService;
$scope.$watch('UserService.getCurrentUser()', function (newVal) {
    $scope.currentUser = newVal;
}, true);

编辑

使用 Angular 的 $timeout 而不是 setTimeout 应该注意调用 apply() 以掌握所有异步内容。 https://coderwall.com/p/udpmtq/angularjs-use-timeout-not-settimeout