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 。

就这样 ！！！

如果您很难实现这些事情，请告诉我，我也可以在代码上为您提供帮助。