javascript - 如何在不使用 $watch 的情况下保持多个 Controller 上的服务数据相同？

Question

我在 S.O 上看到了一个较旧的答案，其中指出:

"This JavaScript works as we are passing an object back from the service rather than a value. When a JavaScript object is returned from a service, Angular adds watches to all of its properties."

然后给出这个例子:

JavaScript:

angular.module("Demo", [])
    .factory("DemoService", function($timeout) {

        function DemoService() {
            var self = this;
            self.name = "Demo Service";

            self.count = 0;

            self.counter = function(){
                self.count++;
                $timeout(self.counter, 1000);
            }

            self.addOneHundred = function(){
                self.count+=100;
            }

            self.counter();
        }

        return new DemoService();

    })
    .controller("DemoController", function($scope, DemoService) {

        $scope.service = DemoService;

        $scope.minusOneHundred = function() {
            DemoService.count -= 100;
        }

    });

HTML

<div ng-app="Demo" ng-controller="DemoController">
    <div>
        <h4>{{service.name}}</h4>
        <p>Count: {{service.count}}</p>
    </div>
</div>

我问 OP 是否需要 $watch 来保持 Controller 之间的数据相同，他们没有详细说明就说“不”。

但是，当我对其进行测试时，两个 Controller 上的 DemoService“计数”值并不相同，除非我使用 $watch。

下面是一个 fiddle 示例，但添加了一个 Controller :

http://jsfiddle.net/qqejytbz/1/

在这个例子中，如何在不使用 $watch 或 $broadcast 的情况下保持值不变？

由于选择的答案更新了 fiddle :

http://jsfiddle.net/qqejytbz/4/

Answer 1

在您的第二个 Controller 中，您直接存储 count 的值，这会在分配 count 时创建一个副本。如果 count 是一个对象，那么 {{service.count}} 和 $scope.count 将只是对同一对象的引用。然后对象的修改属性将在 Controller 之间同步。

例如。

//in DemoService
self.count = {value: 0};
// Binding in html for controller 1
{{service.count.value}}
// Assignment in controller 2:
$scope.count = DemoService.count;
//$scope.count.value === controller1.service.count.value === 0

service.count.value += 100
//$scope.count.value === controller1.service.count.value === 100

请注意，在下一个完整的摘要周期之前，Angular 可能不会接收到对象的更改。