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

How to manage ui-router or share $scope in different $state

本文关键字：state scope 共享 何管理 管理 ui-router      更新时间：2023-09-26

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

  1. 每个用户都有一个基本帐户，这将显示在一个单独的页面(命名为basic-page);
  2. 用户有几个子帐户，每个子帐户将显示在不同的页面(命名为app-page);
  3. basic-page将显示子帐户的夏季信息，因此app-page可以共享basic-page的loaded $http data更适合代码重用。

作为目的，我在下面使用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中共享数据?谁能给我举个详细的例子?谢谢你。

跨控制器共享数据

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

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

示例代码

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

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

演示:用这种方法工作柱塞。

选择:1

这是"Dirty"选项，您可以使用$rootScope设置全局变量。它可以在任何地方访问，因为它是全局的，我强烈建议你不要这样做，尽管我还是会向你指出这一点。

选择:2

当一个状态处于"活动"状态时，它的所有祖先状态也隐式地处于活动状态。因此，您可以考虑父子关系来构建状态，并以分层方式跨范围共享数据。官方文件和工作活塞与上述方法。

相关文章：