如何在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中的兩個獨立模塊之間共享數據

回答

相關問題