javascript - 为什么在 AngularJS 中设置服务时，数据没有从一个 Controller 更新到另一个 Controller ？

Question

我想要做的是使用服务将数据从一个 Controller 设置到另一个 Controller 。

在我的代码中，服务成功更新数据，但数据在第二个 Controller 中未更新

HTML:

<div ng-app="App">
    <div ng-controller="Cotroller1">
        <p>{{test}}</p>            <!-- still value 20, after button click -->
    </div>
    <div ng-controller="Cotroller2">
            <button ng-click="changeValue(30)">test</button>
    </div>
</div>

JS:

app.service('Service', function(){
    var value = 20;

    return {
        getValue: function(){
            return value;
        },
        setValue: function(newValue){
            value = newValue;
        }
    };
});

app.controller('Cotroller1', function($scope, Service){
    $scope.test = Service.getValue();
});
app.controller('Cotroller2', function($scope, Service){
    $scope.changeValue = function(newValue){
        Service.setValue(newValue);
        alert(Service.getValue());          //proves the data was updated
    };
});

JSFiddle

这对于我想做的事情来说是一个很好的做法吗？我错过了什么？

Answer 1

就我而言，使用事件是可行的方法。如果有人认为相反，我想知道为什么:

var app = angular.module('App', []);

app.service('Service', function($rootScope){
    var value = 20;

    return {
        getValue: function(){
            return value;
        },
        setValue: function(newValue){
            $rootScope.$broadcast("changeValue", newValue);
        }
    };
});

app.controller('Cotroller1', function($scope, Service){
    //$scope.test = Service.getValue();
    $scope.$on("changeValue",function(event, args){
        $scope.test = args;
    });
});

app.controller('Cotroller2', function($scope, Service){
    $scope.changeValue = function(){
        Service.setValue("12341234");
    };
});