Question

我有一个AngularJS网站，我想要显示的对象资源是：

每个用户都有一个基本帐户，该帐户将显示在一个页面中（名为basic-page）;
用户有多个子帐户，每个子帐户都会显示在一个不同的页面中（名为app-page）;
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

跨控制器共享数据

每当您需要跨州共享数据时，您需要创建一个服务/工厂，您可以在与这些状态相关联的控制器中实例化。

工厂将包含您需要共享的不同数据的基本getter和setter。就像在java中构建getter和setter以跨类共享一样。

示例代码

var droppedWhere = $('this').next().attr('id');

免责声明：我没有对此代码进行测试，但它应该可以帮助您获取并设置您需要在整个应用中访问的某些值。

演示：使用此方法工作plunker。

替代方案：1

这是“Dirty”替代方案，您可以使用.factory('yourFactory', function ($scope) { return { get: function () { return $scope.someValue; }, set: function(value){ $scope.someValue = value; } }; })设置全局变量。它可以在任何地方访问，因为它的全球性，我强烈建议你不要这样做，但我还是会指出你。

替代方案：2

当状态为“活动”时 - 它的所有祖先状态也是隐式活动的。因此，您可以考虑父子关系构建您的状态，并以分层方式跨范围共享数据。 Official Docs并使用上述方法工作plunker。

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

1 个答案: