Как сохранить данные обслуживания одинаково на нескольких контроллерах без использования $watch?

Там более старый ответ, который я увидел здесь на S.O, который гласит:

"Этот JavaScript работает, поскольку мы передаем объект обратно из а не стоимость. Когда объект JavaScript возвращается из служба Angular добавляет часы во все свои свойства.

Затем он приводит этот пример:

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, чтобы данные были одинаковыми для контроллеров, и они сказали "нет", не уточняя.

Но, когда я проверяю это, значение "count" DemoService на обоих контроллерах не одинаково, если только я не использую $watch.

Вот скрипка с приведенным ниже примером, но с добавленным контроллером:

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

Учитывая этот пример, как можно сохранить значение одинаковым, но без использования $watch или $broadcast?

Обновлен скрипт благодаря выбранному ответу:

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

Ответы

Ответ 1

В вашем втором контроллере вы сохраняете значение count напрямую, что делает копию счета в момент его назначения. Если count были объектом, то {{service.count}} и $scope.count будут просто ссылкой на один и тот же объект. Затем измененные свойства объекта будут синхронизированы между контроллерами.

Eg.

//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 может не подхватывать изменения объекта до следующего полного цикла дайджест.