为什么控制器不响应路由更新？

Question

我想保留控制器的实例而不重新加载.我设置reloadOnSearch为false,我在控制器中管理路由更改.这是代码.

这是我链接的示例<a href="products/page/2">next</a>.我已经定义了以下模块.

angular.module('app.products', ['ngRoute', 'ngResource'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
            .when('/:section/:view/:number', {
                templateUrl: 'tpl/table.html',
                controller: 'ProductsCtrl',
                controllerAs: 'productsCtrl',
                reloadOnSearch: false
            });
}])
.controller('ProductsCtrl', ['$scope', '$routeParams', '$location', ProductsCtrl]);

调节器

function ProductsCtrl($scope, $routeParams, $location) {

    $scope.$on('$routeUpdate', function () {
        console.log("routeUpdate");
    });

}

但是控制器不会响应更改的路由,并且文本不会写入控制台输出.

Answer 1

在角度行话中,"搜索​​"仅指URL的查询字符串参数部分.例如:?key=value&page=42

并且"路径"指的是没有该查询字符串的URL.这/products/page/2是一条路.

设置reloadOnSearch: false时,如果只有查询字符串参数发生更改,则告诉angular不要重新加载视图和关联的控制器.

• 因此,如果路径发生变化,比如你从导航/products/page/2到/products/page/3,那么该视图仍然会重新加载.否$routeUpdate会被解雇,因为没有必要.从$routeParams再次调用控制器初始化函数时,您将获得新参数.
• 但是,如果路径没有更改,但只有查询字符串参数确实更改.例如,当你导航/products?page=2到/products?page=3.然后视图将不会重新加载,并且$routeUpdate将播放.

所以这里的解决方案是定义page为查询字符串参数而不是路径参数:

angular.module('app.products', ['ngRoute', 'ngResource'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
            .when('/:section', {
                templateUrl: 'tpl/table.html',
                controller: 'ProductsCtrl',
                controllerAs: 'productsCtrl',
                reloadOnSearch: false
            });
}])
.controller('ProductsCtrl', ['$scope', '$routeParams', '$location', ProductsCtrl]);

控制器:

function ProductsCtrl($scope, $routeParams, $location) {
    $scope.setupView = function setupView(section, page) {
        // Setup you view here
        // ...
    };

    $scope.$on('$routeUpdate', function () {
        // This is called when only the query parameters change. E.g.: ?page=2
        $scope.setupView($routeParams.section, $routeParams.page)
    });

    // This one is called when the the path changes and the view is reloaded.
    $scope.setupView($routeParams.section, $routeParams.page)
}