通过服务同步控制器之间的数据 [英] Syncing data between controllers through a service

问题描述

从<一个href=\"http://stackoverflow.com/questions/12008908/how-can-i-pass-variables-between-controllers-in-angularjs\">this计算器问题，我的理解是，我应该使用服务控制器之间传递数据。

From this stackoverflow question, my understanding is that I should be using services to pass data between controllers.

不过，在我的例子中的jsfiddle ，我无法听着改变我的服务当跨控制器修改。

However, as seen in my example JSFiddle, I am having trouble listening to changes to my service when it is modified across controllers.

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 数据发布到应用。但是，如果您尝试更改 DIV 与 CTRL2 相关，文本不流过改变输入框对面控制器边界 CTRL1 。

In my example, I am trying to subscribe to App.data.status in Ctrl1, and I am trying to publish data from Ctrl1 to App. However, if you try to change the input box in the div associated with Ctrl2, the text does not change across the controller boundary across to Ctrl1.

推荐答案

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

下面是一个更新的小提琴。基本上，如果你要分享服务两个控制器之间的同一个数据对象，你只需要一个字符串或JavaScript原使用的某些对象的排序一边。在这种情况下，我只是使用普通的对象{}两个控制器之间共享数据。

Here's an updated fiddle. Basically if you're going to share the same data object between two controllers from a service you just need to use an object of some sort aside from a string or javascript primitive. In this case I'm just using a regular Object {} to share the data between the two controllers.

在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，而不是更新使用=将取代该服务的本地参考的对象属性，但不会在控制器中得以体现。

Nothing wrong with using a service here but if the only purpose is to have a shared object across the app then I think using .value makes a bit more sense. If this service will have functions for interacting with endpoints and the data be sure to use angular.copy to update the object properties instead of using = which will replace the service's local reference but won't be reflected in the controllers.

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

使用.value的修改后的JS

The modified JS using .value

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

这篇关于通过服务同步控制器之间的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！