AngularJs：跨控制器共享數據

Question

我在應用程序中使用超級英雄Angularjs 。 我有幾個頁面，例如home.html ， project.html ， map.html 。 每個頁面都有與其關聯的控制器，例如HomeCtrl ， ProjectCtrl ， MapCtrl 。 在我的home.html用戶可以創建一個項目或導航到project.html 。 在project.html我列出了所有項目。 當用戶單擊項目時，他將導航到map.html ，其中有一些有關該項目的信息。 我正在使用ngRoute在視圖之間進行路由。 我在跨控制器共享數據方面面臨一些挑戰。 我創建了一個名為dataFactory的服務，該服務存儲了從后端檢索到的所有數據。 在我的project.html視圖中，我從后端加載所有數據並將其存儲在服務中。 當用戶進入項目時，我使用存儲在dataFactory中的dataFactory 。 令人擔心的是，當用戶在map.html上時刷新頁面時，存儲在dataFactory中的所有數據將被擦除並且不會被重新加載，這是因為數據加載發生在project.html頁面中。 我不知道該如何處理。 我無法在每個控制器中調用后端以獲取數據。 我打算在app.run()方法中加載常用數據。 但是在那種情況下，我必須broadcast/emit事件以通知控制器，這也將更加混亂，最終會導致錯誤，因為我知道我的應用程序將是一個龐大的應用程序。

Answer 1

有一個解決方案，但是在$routeProvider創建路由時需要一些其他配置，當您從后端獲取數據時可以解析路由。 通過使用此方法，如果用戶刷新您的項目之一上的頁面，它將首先接收數據，然后顯示該特定頁面。

首先，您必須像這樣修改dataFactory

app.service('MyService', function($http) {
    var myData = null;

    var promise = promise || $http.get('data.json').success(function (data) {
      myData = data;
    });

    return {
      promise:promise,
      doStuff: function () {
          return myData
      }
    };
});

然后，在$routeProvider ，可以使用此方法使路由來解決何時再獲取數據（即收到其承諾），如果存儲了數據，則該方法不會再調用另一個數據。

app.config(function($routeProvider){
  $routeProvider
    .when('/',{controller:'MainCtrl',
    template:'<div>From MyService:<pre>{{data | json}}</pre></div>',
    resolve:{
      'MyServiceData':function(MyService){
        return MyService.promise;
      }
    }})
    .when('/b',{controller:'MainCtrl2',
    template:'<div>From MyServic2e:<pre>{{data | json}}</pre></div>',
    resolve:{
      'MyServiceData':function(MyService){
        return MyService.promise;
      }
    }})
  })

我為演示制作了一個工作的Plunker 。 隨意詢問有關此的任何問題。

希望能幫助到你。

Answer 2

當您引用該頁面時，應用模塊會再次加載，以清除所有已存儲的var。 您可以使用sessionStorage或localStorage維護數據。

Answer 3

當您將數據存儲到service/ factory將其存儲到瀏覽器的local storage 。 因此，當用戶刷新頁面時，您可以檢查local storage是否有數據。 如果local storage有數據，只需將這些數據保存到service/ factory 。

就這樣 ！！！

如果您很難實現這些事情，請告訴我，我也可以在代碼上為您提供幫助。