$location.search() setter 不会导致 ui-router 重新加载

Question

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

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

如何在 ui-router 中触发路由重新加载，同时将所有查询参数保留在 url 中，如 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.$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 重新加载

$location.search() setter not causing reload in ui-router

angularjs

angular-ui-router