javascript - 如何在不同的 $state 管理 ui-router 或共享 $scope

Question

我有一个 AngularJS 站点，我想显示的对象资源是:

1. 每个用户都有一个基本帐户，该帐户将显示在一个页面中(名为 basic-page)；
2. 用户有多个子账户，每个子账户将显示在不同的页面(名为app-page)；
3. basic-page会显示子账号的夏季信息，所以app-page可以分享loaded $http data basic-page 更利于代码重用。

作为目的，我使用ui-router定义如下状态:

.state('user', {
    url: '/user/{id}',
    title: 'User-Page',
    templateUrl: helper.basepath('user.html')
})
.state('user.app', {
    url: '/{app}',
    title: 'App-Page',
    emplateUrl: helper.basepath('app.html')
})

请注意状态 user.app 是 user 的子级。

我想要的是当我进入 user.app 时，它可以重用 user 中的数据，如果是不同的页面，那么 user 不需要包含 ui-view 来包含 user.app 的模板。但实际上我输入了 user.app，它并没有显示 app.html(因为我没有在 user.html< 中包含 ui-view/)。

也许这不是 ui-router 的正确用法。

那么，如何在不同的$state 中共享数据呢？任何人都可以给我一个详细的例子吗？谢谢。

Answer 1

跨 Controller 共享数据

任何时候您需要跨状态共享数据，您都需要创建一个服务/工厂，您可以在与这些状态关联的 Controller 中实例化它。

工厂将由基本的 getter 和 setter 组成，用于您需要共享的不同数据。就像您在 java 中构建 getter 和 setter 以跨类共享一样。

示例代码

.factory('yourFactory', function ($scope) {
  return {
    get: function () {
        return $scope.someValue;
    },
    set: function(value){
      $scope.someValue = value;
    }
  };
})

免责声明:我没有测试过这段代码，但它应该可以完成获取和设置您需要在整个应用中访问的一些值的工作。

演示:工作 plunker用这种方法。

选择:1

这是“脏”替代方案，您可以使用 $rootScope 设置全局变量。由于它是全局性的，因此可以在任何地方访问它，我强烈建议您不要这样做，但无论如何我都会向您指出这一点。

备选方案:2

当一个状态为“事件”时——它的所有祖先状态也隐含地处于事件状态。因此您可以在考虑父子关系的情况下构建您的状态，并以分层方式跨范围共享数据。 Official Docs和工作plunker用提到的方法。