Question

使用 ngRoute ，使用$location.search()作为设置器会导致路由重新加载，您可以使用reloadOnSearch: false关闭此行为。

但是，如果我将ngRoute代码与上述ui-route代码交换，则控制器不再重新加载。

如何在ui-router 中触发路由重新加载，同时将所有查询参数保留在网址中，如ngRoute？

编辑：我需要将查询保留在URL中，并在路由重新加载后保持不变，因为我希望用户能够将其加入书签。

/?people=bob&people=james&people=pete...&color=red&color=blue...etc

的script.js

angular.module('app', ['ui.router', 'ngRoute'])

// .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
//     $stateProvider
//         .state('home', {
//             url: '/',
//             templateUrl: 'page1.html',
//             controller: 'MyController'
//         });

//         $urlRouterProvider.otherwise('/');
// }])

.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'page1.html',
            controller: 'MyController'
            // reloadOnSearch: false
        });
})

.controller('MyController', ['$scope', '$location',
    function($scope, $location) {
        console.log('reloaded');
        $scope.changeQuery = function(testId) {
            $location.search('id', testId);
            console.log($location.absUrl());
        };
    }
]);

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
    <script src="script.js"></script>
</head>

<body ng-controller="MyController">
    <h3>ui router</h3>
    <ui-view></ui-view>

    <h3>ng router</h3>
    <ng-view></ng-view>

</body>

</html>

page1.html

<h1>Change query example</h1>
<input ng-model="testId" />
<button ng-click="changeQuery(testId)">Change!</button>

Answer 1

在你的控制器中，不要直接更改$ location，而是尝试使用$ state.go（...）更改$ state

此处记录： http://angular-ui.github.io/ui-router/site/#/api/ui.router.state。$状态

angular.module('app', ['ui.router', 'ngRoute']).config(['$stateProvider','$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
        url: '/?key=:id',
        templateUrl: 'page1.html',
        controller: 'MyController'
    });
$urlRouterProvider.otherwise('/');
}]).controller('MyController', ['$scope', '$state', '$location',
function($scope, $state, $location) {
    console.log('reloaded');
    $scope.reload = function() {
      $state.reload();
    };

    $scope.changeQuery = function(testId) {
        $state.go('home', {id: testId});
        console.log($location.absUrl());
    };
}
]);

例如： plunker

Answer 2

保留对旧查询的引用，然后在您想要更改查询时对其进行扩展并重新加载

var oldQuery = $location.search(); // save the current query
$scope.changeQuery = function(newQuery) {
  //whenever a new query comes, extend it and load the url again
  angular.extend(newQuery, oldQuery);
  $location.search(newQuery);
};

$ location.search（）setter不会在ui-router中导致重载

2 个答案: