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

Question

我需要知道如何在不同模块中的两个 Controller 之间同步数据。下面是我正在使用的代码。我尝试通过观察者模式使用该服务。但似乎两个应用程序上注入(inject)的服务实例有很大不同

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']);

查看 HTML http://embed.plnkr.co/l0utIMp27qpbsao64Api/

Answer 1

您正在创建 2 个完全独立的 Angular 应用程序。这就是为什么你会得到 2 个实例。您需要 1 个包含 3 个模块的应用。

首先从index.html中取出angular.bootstrap(document.getElementById("app2"), ['app2']);。您正在那里引导第二个应用程序。不是你想要的。

接下来，将 ng-app="app1" 移动到包含两个 Controller 的元素，例如 body 元素。

此外，在 index.html 中将 {{myCounty}} 更改为 {{MyCounty}}。案例很重要。

最后在 app.js 中将 angular.module('app1',['app1','app3']) 更改为 angular.module(' app1',['app2','app3'])。我认为这就是您最初打算做的事情。

另外，请在问题中发布您的index.html内容。很多问题都在那里。这样，如果您的链接在某个时候失效，这个问题可能仍然对其他有类似问题的人有帮助。

这是一个工作 Plunk .