Question

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

＆＃34;这个JavaScript的工作原理是我们从一个对象传回来服务而不是价值。从中返回JavaScript对象时作为一项服务，Angular将手表添加到其所有属性中。＆＃34;

然后给出了这个例子：

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以保持控制器之间的数据相同，他们说＆＃34; no＆＃34;没有详细说明。

但是，当我测试它时，DemoService＆＃34;计数＆＃34;两个控制器上的值不一样，除非我使用$ watch。

这里是下面示例的小提琴，但添加了一个控制器：

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

在这个例子中，如何保持值相同，但不使用$ watch或$ broadcast？

通过选择的答案更新了小提琴：

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

Answer 1

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

例如

//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可能无法获取对象的更改。

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

1 个答案: