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

Question

从这个stackoverflow问题,我的理解是我应该使用服务在控制器之间传递数据.

但是,正如我的示例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;
    });

以下是一些可能有助于您了解a factory和a 之间差异的信息service:在创建服务方法时,module.service和module.factory之间的区别是什么