AngularJS ui-router中的URL路由参数

时间:2022-04-30 18:52:07

I want to be able to reload just the nested view of my application and attached a route parameter on so that I can have URL routing in my application. I cannot figure out how to do this, I initially had it working with a query like this:

我希望能够重新加载我的应用程序的嵌套视图并附加一个路由参数,以便我可以在我的应用程序中进行URL路由。我无法弄清楚如何做到这一点,我最初让它使用这样的查询:

$location.search('userId', user._id);
//http://localhost:9000/#/user/?userId=123456789

My desired URL is below, with the userId = 123456789

我想要的URL在下面,userId = 123456789

http://localhost:9000/#/user/123456789

My app.js file

我的app.js文件

$stateProvider
    .state('index', {
        url: '/',
        views: {
            '@' : {
                templateUrl: 'views/layout.html'
            },
            'top@index' : {
                templateUrl: 'views/top.html',
                controller: function($scope, $state) {
                    $scope.userLogOut = function() {
                        $state.go('login');
                    };
                }
            },
            'left@index' : { templateUrl: 'views/left.html' },
            'main@index' : { templateUrl: 'views/main.html' }
        }
    })
    .state('index.user', {
        url: 'user:userId',
        templateUrl: 'views/user/user.html',
        controller: 'UserCtrl'
    })
    .state('index.user.detail', {
        url: '/',
        views: {
            'detail@index' : {
                templateUrl: 'views/user/details.html',
                controller: 'DetailCtrl'
            }
        }
    })

In my controller:

在我的控制器中:

$state.reload('index.user.detail', {userId: $scope.user._id});

1 个解决方案

#1


0  

As you are using ui-router you can use $state.go('index.user', { userId: {{yourid}} });

当您使用ui-router时,您可以使用$ state.go('index.user',{userId:{{yourid}}});

To allow the query string parameter to work using ui-router write your state like this,

要允许查询字符串参数使用ui-router工作,请写这样的状态,

.state('index.user', {
    url: 'user/?userId=:param',
    templateUrl: 'views/user/user.html',
    controller: 'UserCtrl'
})

That would allow this to work,

这将允许这个工作,

//http://localhost:9000/#/user/?userId=123456789

Without the query string parameter (your desired URL) would be this,

没有查询字符串参数(您想要的URL)就是这个,

.state('index.user', {
    url: 'user/:userId',
    templateUrl: 'views/user/user.html',
    controller: 'UserCtrl'
})

http://localhost:9000/#/user/123456789

#1


0  

As you are using ui-router you can use $state.go('index.user', { userId: {{yourid}} });

当您使用ui-router时,您可以使用$ state.go('index.user',{userId:{{yourid}}});

To allow the query string parameter to work using ui-router write your state like this,

要允许查询字符串参数使用ui-router工作,请写这样的状态,

.state('index.user', {
    url: 'user/?userId=:param',
    templateUrl: 'views/user/user.html',
    controller: 'UserCtrl'
})

That would allow this to work,

这将允许这个工作,

//http://localhost:9000/#/user/?userId=123456789

Without the query string parameter (your desired URL) would be this,

没有查询字符串参数(您想要的URL)就是这个,

.state('index.user', {
    url: 'user/:userId',
    templateUrl: 'views/user/user.html',
    controller: 'UserCtrl'
})

http://localhost:9000/#/user/123456789