0

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.

TeeKai
  • 671
  • 2
  • 10
  • 20
  • 1
    I think broadcast/emit is the way to go here: http://stackoverflow.com/questions/26752030/rootscope-broadcast-vs-scope-emit – dmgig Feb 05 '16 at 20:16
  • 1
    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 Feb 06 '16 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 Feb 09 '16 at 17:26

1 Answers1

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

lux
  • 8,315
  • 7
  • 36
  • 49
  • 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? – TeeKai Feb 05 '16 at 21:33