如何在 AngularJS 中的两个独立模块之间共享数据

Question

I need to know how to sync data between two controllers in different modules. below is the code I'm using. I tried to use the service with the observer pattern. but it seems that the service instance injected on the two apps are quite different

angular.module('app3', []).service('sharedService', function () {
        this.Country = 'USA';
        this.scope = null;
        this. observerCallbacks = [];

        //register an observer
        this.registerObserverCallback = function (callback) {
            this.observerCallbacks.push(callback);
        };

        //call this when you know 'foo' has been changed
        this.notifyObservers = function () {
            alert('notifed');

            angular.forEach(this.observerCallbacks, function (callback) {
                console.log('notification');
                callback();
            });
        };
    })
    angular.module('app2', ['app3']).controller('app2Controller', function ($scope, $rootScope, sharedService) {
        console.log('Controller 2 loaded');
        var updateCountry = function () {
            $scope.MyCountry = sharedService.Country;
        };

        sharedService.registerObserverCallback(updateCountry);
        console.log(sharedService);
        // this needs lazy loading
        // $rootScope = sharedService.scope;

        // console.log(sharedService.Country);
        // $scope.MyCountry = sharedService.Country;
    })
    angular.module('app1',['app1','app3']).controller('app1Controller',function($scope,$rootScope,sharedService)
    {
        $scope.Countries = ['Egypt', 'KSA'];
        $scope.Country = '';
        sharedService.scope = $rootScope;
        $scope.DrpChange = function () {
            //$stateParams.Country = $scope.Country;
            //$state.current.params.Country = $scope.Country;
            //console.log($state.current.params.Country);
            console.log(sharedService);
            sharedService.Country = $scope.Country;
            sharedService.notifyObservers();
            // this is not working because the rootscope is not shared
            $rootScope.$emit("Country.changed", $scope.Country);
        }
    })



    angular.bootstrap(document.getElementById("app2"), ['app2']);

see HTML at http://embed.plnkr.co/l0utIMp27qpbsao64Api/

Answer 1

You are creating 2 completely separate angular apps. That's why you're getting 2 instances. You want 1 app with 3 modules.

First take out angular.bootstrap(document.getElementById("app2"), ['app2']); from index.html . You're bootstrapping a second app there. Not what you want.

Next, move ng-app="app1" to an element that contains both controllers like the body element.

Also, in index.html change {{myCounty}} to {{MyCounty}} . Case matters.

Finally in app.js change angular.module('app1',['app1','app3']) to angular.module('app1',['app2','app3']) . I think that was what you meant to do in the first place.

Also, please post your index.html contents in the question. A lot of the problems were in there. That way, if your link dies at some point, this question may still be helpful to others with similar problems.

Here is a working Plunk .

Answer 2

here's an demo/example showing a way to share data between tow different angular module : You should modify the code and use it according to your need/purpose :

angular.module('app.A', [])
.service('ServiceA', function() {
    this.getValue = function() {
        return this.myValue;
    };

    this.setValue = function(newValue) {
        this.myValue = newValue;
    }
});

angular.module('app.B', ['app.A'])
.service('ServiceB', function(ServiceA) {
    this.getValue = function() {
        return ServiceA.getValue();
    };

    this.setValue = function() {
        ServiceA.setValue('New value');
    }
});

Thanks & Cheers :-)