Question

我有AngularJS应用程序，使用$ routeProvider

定义以下路径

$routeProvider        
        .when('/users/edit', {
            templateUrl: 'components/user-management/view-users/view.html'
            controller: 'viewUsersCtrl'            
        })
        .when('/users/edit/:id', {
            templateUrl: 'components/user-management/edit-user/view.html'
            controller: 'editUserCtrl'   
            reloadOnSearch:  false                    
        })
        .otherwise {redirectTo: '/'}

在浏览器中请求/放置以下URL时

webapp/#/users/edit/3

它会检索用户的详细信息，但在您点击浏览器的刷新按钮后，以下网址将会接管。

webapp/#/users/edit/:id

这将导致没有用户。

我如何保留路径/查询字符串变量，以便当我点击刷新按钮时它会保持不变？

Answer 1

最好使用$ stateProvider而不是$ routeProvider：

(function () {

    var app = angular.module("myApp", ["ui.router"]);

    app.config(function($stateProvider) {           

        var users = {
                name: 'users',
                url: '/users',      
                templateUrl: 'users.html'
            },          
            viewUsers = {
                name: 'view-user',          
                url: '/edit',
                parent: users,
                templateUrl: 'view-users.html'
                //controller: 'viewUsersCtrl'               
            },
            editUser = {
                name: 'edit-user',          
                url: '/:id',
                parent: viewUsers,
                templateUrl: 'edit-user.html'
                //controller: 'eidtUsersCtrl'               
            };

        $stateProvider.state(users);
        $stateProvider.state(viewUsers);
        $stateProvider.state(editUser);
    });     

})();

<强>的index.html ：

<!DOCTYPE html>
<html>
    <head>
        <title>UI-ROUTER</title>
        <meta charset="UTF-8">        
        <script src="js/angular.min.js"></script>
        <script src="js/angular-ui-router.js"></script>
        <script src="js/app.js"></script>
    </head>

    <body ng-app="myApp">
        <a href="#" ui-sref="users">Users</a>               
        <div ui-view></div>
    </body>
</html>

<强> users.html ：

<h3>users</h3>
<div ui-view></div>

查看-users.html ：

<h3>VIEW USER</h3> <div ui-view></div>

修改-user.html ：

<h3>EDIT USER</h3>

Answer 2

我已经在我的angular.run方法中实现了它：

$routeScope.$on("$routeChangeStart", function(e, next, current) {
    $rootScope.queryString = $location.search()
})

$routeScope.$on("$routeChangeSuccess", function(e, next, current) {
    $location.search($rootScope.queryString);
})

如何在AngularJS页面刷新后保留路径和查询字符串参数

2 个答案: