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

我需要知道如何在不同模块中的两个控制器之间同步数据。下面是我使用的代码。我试图用观察者模式使用服务。但似乎注入的两个应用服务实例有很大的不同如何在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在http://embed.plnkr.co/l0utIMp27qpbsao64Api/

来源

2016-03-12 Mahmoud Shaaban

应该是同一个实例。什么是具体问题？ – charlietfl

其实它们并不相同，控制台的日志显示它们不同。如果我们在两个控制器中都有相同的参考，问题将得到解决。 Object {Country：“USA”，scope：Scope，observerCallbacks：Array [0]} 对象{Country：“KSA”，scope：Scope，observerCallbacks：Array [0]} –

创建一个演示，复制您遇到的任何问题 – charlietfl

你正在创建2个完全独立的角度应用。这就是为什么你得到2个实例。你想要3个模块的应用程序。

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

接下来，将ng-app="app1"移动到包含两个控制器（如body元素）的元素。

另外，在index.html变更{{myCounty}}变为{{MyCounty}}。案件事宜。

最后在app.js更改angular.module('app1',['app1','app3'])到angular.module('app1',['app2','app3'])。我认为这就是你首先要做的。

此外，请在问题中发布您的index.html内容。那里有很多问题。这样，如果你的链接在某个时候死了，这个问题可能仍然有助于其他类似问题的人。

这是一个工作Plunk。

来源

2016-03-12 16:44:53 rgvassar

非常感谢！这正是我需要的！我不得不将模块添加为依赖项。 –

-3

这里展示的方式来牵引不同角度模块之间共享数据的演示/例子：你应该根据你的需要/目的修改代码并使用它：

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

感谢&干杯： - ）

来源

2016-03-12 16:48:42

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

回答

相关问题