Question

从this stackoverflow question开始，我的理解是我应该使用服务在控制器之间传递数据。

但是，如my example JSFiddle所示，当我跨越控制器修改服务时，我无法收听对服务的更改。

angular.module('myApp', [])
    .controller('Ctrl1', function ($scope, App) {
        $scope.status = App.data.status;
        $scope.$watch('App.data.status', function() {
            $scope.status = App.data.status;
        });
})
    .controller('Ctrl2', function ($scope, App) {
        $scope.status = App.data.status;
        $scope.$watch('status', function() {
            App.data.status = $scope.status;
        });
})
    .service('App', function () {
        this.data = {};
        this.data.status = 'Good';
});

在我的示例中，我尝试在App.data.status订阅Ctrl1，我正在尝试将数据从Ctrl1发布到App。但是，如果您尝试更改与div关联的Ctrl2中的输入框，则文本不会在控制器边界上更改为Ctrl1。

Answer 1

http://jsfiddle.net/VP4d5/2/

这是一个更新的小提琴。基本上，如果您要从服务中的两个控制器之间共享相同的数据对象，您只需要使用除字符串或javascript原语之外的某种对象。在这种情况下，我只是使用常规Object {}来共享两个控制器之间的数据。

JS

angular.module('myApp', [])
    .controller('Ctrl1', function ($scope, App) {
        $scope.localData1 = App.data;
})
    .controller('Ctrl2', function ($scope, App) {
        $scope.localData2 = App.data;
})
    .service('App', function () {
        this.data = {status:'Good'};
});

HTML

<div ng-controller="Ctrl1">
    <div> Ctrl1 Status is: {{status}}
    </div>
    <div>
        <input type="text" ng-model="localData1.status" />
    </div>
<div ng-controller="Ctrl2">Ctrl2 Status is: {{status}}
    <div>
        <input type="text" ng-model="localData2.status" />
    </div>
</div>

在这里使用服务没有错，但如果唯一目的是在应用程序中拥有共享对象，那么我认为使用.value会更有意义。如果此服务具有与端点交互的功能，并且数据肯定使用angular.copy来更新对象属性而不是使用=，它将替换服务的本地引用，但不会反映在控制器中。

http://jsfiddle.net/VP4d5/3/

修改后的JS使用.value

angular.module('myApp', [])
    .controller('Ctrl1', function ($scope, sharedObject) {
        $scope.localData1 = sharedObject;
})
    .controller('Ctrl2', function ($scope, sharedObject) {
        $scope.localData2 = sharedObject;
})
.value("sharedObject", {status:'Awesome'});

Answer 2

我同意@shaunhusain，但我认为你最好不要使用工厂而不是服务：

angular.module('myApp', [])
    .controller('Ctrl1', function ($scope, App) {
        $scope.localData1 = App.data;
    })
    .controller('Ctrl2', function ($scope, App) {
        $scope.localData2 = App.data;
    })
    .factory('App', function () {
        var sharedObj = {
            data : {
                status: 'Good'
            }
        };

        return sharedObj;
    });

以下是一些可能有助于您了解factory和service之间差异的信息：When creating service method what's the difference between module.service and module.factory

通过服务在控制器之间同步数据

2 个答案: