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

我需要知道如何在不同模块中的两个控制器之间同步数据。下面是我正在使用的代码。我尝试将服务与观察者模式结合使用。但这两个应用上注入的服务实例似乎有很大不同

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，您正在创建两个完全独立的应用程序。这就是为什么会有两个实例。您需要一个包含3个模块的应用程序

首先取出angular.bootstrap（document.getElementById（“app2”），['app2']）来自

index.html

。您正在启动第二个应用程序。不是你想要的

接下来，将

ng app=“app1”

移动到包含两个控制器的元素，如

body

元素

另外，在

index.html

中，将

{{myCounty}}

更改为

{{myCounty}

。案件很重要

最后在

app.js

中，将

angular.module（'app1'，['app1'，'app3']）

更改为

angular.module（'app1'，['app2'，'app3']）

。我想这就是你一开始想做的

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

---

这是一个工作示例。

这是一个演示/示例，展示了两个不同角度模块之间共享数据的方法：您应该修改代码，并根据需要/目的使用它。：

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

---

谢谢和干杯：-）

应该是相同的实例。具体问题是什么？实际上它们不一样，控制台的日志显示它们不同。如果两个控制器中的引用相同，问题将得到解决。Object{Country:“USA”，scope:scope，observerCallbacks:Array[0]}Object{Country:“KSA”，scope:scope，observerCallbacks:Array[0]}创建一个演示，复制您在这里遇到的任何问题@MahmoudShaaban亲爱的，您的代码看起来很混乱，而且也不完整。我将向你们展示一种方法，如何通过两个不同的角度模块共享数据。这是一个简单的示例，之后您可以修改它并将其用于您的目的。。。如果它对你有帮助，那就接受它，投赞成票。请……：）谢谢！这正是我需要的！我不得不添加模块作为依赖项。