Sync up JSON objects on the same page with various AngularJS controllers

Question

One page is divided to several sections and each section has its own controller. The JSON objects on those sections are related. After some actions performed in one section, the state of a JSON object is changed. The change shall propagate to other sections of the page. One controller can access an object, say $scope.foo, in another controller. I have $scope.foo = ... after an action of the previous controller. The code, however, doesn't sync up the data displayed in another section.

Also, I have another set of JSON objects which is not accessible in the controller. And one object in the controller is one of those objects. How to sync them up? Is the AngularJS observer a good approach for this problem?

Based on Lux's suggestion, I create a service as the following:

angular.module('myApp.services')
.service('FooService', ['NotificationCenter', function (NotificationCenter) {
    "use strict";

    var foo;

    function setFoo(f) {
        foo = f;
    }

    function getFoo() {
        return foo;
    }

    var facade = {
        getFoo: getFoo,
        setFoo: setFoo
    };

    return facade;

}]);

And in the controller of displaying the foo data, I have

// A GET web service call
FooService.setFoo(response);
$scope.currentFoo = FooService.getFoo();

And in another controller where the data is altered, I have

// after changing the data and make a PUT web service call which will retrieve the updated data
FooService.setFoo(response);

The data from the first controller isn't updated.

I think broadcast/emit is the way to go here: stackoverflow.com/questions/26752030/… — dmgig
– dmgig, Commented Feb 5, 2016 at 20:16
I agree with @dgig. A singleton service in Angular guarantees each component will share the same resource, however if you need various components to "become aware of a change" to the state of the data being stored in the service, then yes $emit $broadcast, would be viable notification mechanisms. Perhaps even Redux. — lux
– lux, Commented Feb 6, 2016 at 17:17
I had tried using the pair of $emit and $on with both $scope and $rootScope yesterday. It seems to me that the $emit can be either with $scope or $rootScope, but $on needs to be with $rootScope. That works for child-parent relationship. It doesn't work in a sibling relationship. Also, with the approach, I don't see a need to have an access to the same data through a service component. — TeeKai
– TeeKai, Commented Feb 9, 2016 at 17:26

lux · Accepted Answer · 2016-02-05 20:21:19Z

2

Do not use $rootScope, if you have a need to share data across controllers, directives, or services use a Service. In Angular, services are singletons, meaning the same instance can be shared across components, which in turn means, if you myService.setMyData('foo') in one place, you can properly access that updated data via myService.getMyData() in another component.

https://plnkr.co/edit/o1jUauTLQNLKx3dk6vrZ?p=preview

answered Feb 5, 2016 at 20:21

lux

8,4977 gold badges38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TeeKai Over a year ago

If I need to go the route, I have to do quite bit refactoring. Any samples I can use as a reference? I don't know what the link is for?

Collectives™ on Stack Overflow

Sync up JSON objects on the same page with various AngularJS controllers

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related