Question

我在我的应用程序中使用超级英雄Angularjs。我有几页，例如home.html，project.html，map.html。每个页面都有一个与之相关的控制器。 HomeCtrl，ProjectCtrl，MapCtrl。在我的home.html用户可以创建项目或导航到project.html。在project.html我列出了所有项目。当用户点击项目时，他会导航到map.html，其中我有一些有关项目的信息。我正在使用ngRoute在视图之间进行路由。我面临着在控制器之间共享数据的一些挑战。我创建了一个名为dataFactory的服务，它存储从后端检索到的所有数据。在我的project.html视图中，我从后端加载所有数据并将其存储在服务中。当用户登陆项目时，我使用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

当您引用该页面时，应用程序模块再次加载消除所有存储的变量。您可以使用sessionStorage或localStorage来维护数据。

Answer 3

将数据存储到service/ factory时，也会将其存储到浏览器local storage中。因此，当用户刷新页面时，您可以检查local storage是否包含数据。如果您的local storage中有数据，请将这些数据保存到service/ factory。

这就是全部!!!

如果你很难实现这些东西请更新我，我也可以帮你解决这个问题。

AngularJs：跨控制器共享数据

3 个答案: