Angular UI路由器使用go函数在状态之间传递数据不起作用

Angular UI-Router passing data between states with go function does not work

本文关键字：之间 状态 不起作用 数据 函数 路由器 UI go Angular      更新时间：2023-09-26

我刚开始学习angularjs，我正在使用angular ui路由器。我正在尝试使用$state.go将数据从一个状态发送到另一个状态，但没有成功。以下是我目前所拥有的：

我没有故意包含html，因为我认为它是不需要的。如果需要，请告诉我，我会添加它。

我已将我的状态配置如下：

  $stateProvider
        .state('public', {
            abstract: true,
            templateUrl: 'App/scripts/main/views/PublicContentParent.html'
        })
        .state('public.login', {
            url: '/login',
            templateUrl: 'App/scripts/login/views/login.html',
            controller: 'loginCtrl'
        })
    $stateProvider
        .state('private', {
            abstract: true,
            templateUrl: 'App/scripts/main/views/PrivateContentParent.html'
        })
        .state('private.visits', {
            url: '/visits',
            views: {
                'main': {
                    controller: 'visitsListCtrl',
                    templateUrl: 'App/scripts/visits/views/VisitsList.html'
                }
            }
        });

当调用我的LoginController时，它将执行以下代码：

loginModule.controller('loginCtrl', ['$state', function ($scope, $state) {
    $state.go('private.visits', { name : "Object"});
}]);

当private.visits页面处于活动状态时，我正在尝试打印$stateParams:

visitsModule.controller('visitsListCtrl', ['$stateParams',
    function ($stateParams) {
        console.log($stateParams);

    }]);

正如状态一样，$stateParams是一个空对象。我希望它包含我在loginCtrl中传递的对象。

编辑

似乎如果private.visits url具有此url格式'/visits/:name'，并且我还添加了属性params:["name"]，则我可以从public.login状态访问我发送的对象。副作用是将参数添加到url中，这是合乎逻辑的。

我尝试对一个没有url的子状态做同样的事情，在这种情况下，我似乎无法访问从public.login传递的params。

如何在子状态下发送数据？

您要做的是在private.visits状态下定义name参数，如：

$stateProvider
    .state('public', {
        abstract: true,
        templateUrl: 'App/scripts/main/views/PublicContentParent.html'
    })
    .state('public.login', {
        url: '/login',
        templateUrl: 'App/scripts/login/views/login.html',
        controller: 'loginCtrl'
    })
$stateProvider
    .state('private', {
        abstract: true,
        templateUrl: 'App/scripts/main/views/PrivateContentParent.html'
    })
    .state('private.visits', {
        // NOTE!
        // Previously, we were only passing params as an array 
        // now we are sending it as an object. If you 
        // send this as an array it will throw an error 
        // stating id.match is not a function, so we updated 
        // this code. For further explanation please visit this
        // url http://stackoverflow.com/a/26204095/1132354
        params: {'name': null}, 
        url: '/visits',
        views: {
            'main': {
                controller: 'visitsListCtrl',
                templateUrl: 'App/scripts/visits/views/VisitsList.html',
                resolve: {
                        name: ['$stateParams', function($stateParams) {
                            return $stateParams.name;
                        }]
                    }
            }
        }
    });

然后在控制器中访问名称：

visitsModule.controller('visitsListCtrl', ['name',
function (name) {
    console.log(name);
}]);

希望它能帮助你！

当您说：$state.go('private.visits', { name : "Object"});

您不是在向private.visits状态传递数据，而是在将参数设置为private.visits状态，因为您在状态配置中没有为其定义参数，所以它甚至不支持参数。如果您想在使用服务的州之间共享数据，或者如果您的州具有父子关系，则子州将可以访问父州的数据。考虑到你不希望数据在你的URL中传播，我会使用一个服务(getters/ssetters(来实现这一点。

相关文章：