Why controller doesn't respond on route update

问题:

I would like preserve instance of controller without reloading. I set reloadOnSearch to false and I manage route change in my controller. Here is the code.

This is example of my link <a href="products/page/2">next</a>. I have defined following module.

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]);

Controller

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

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

}

But the controller doesn't respond on changed route and text is not written to console output.

回答1:

In the angular jargon, "search" refers only to the query string parameters part of the URL. For instance: ?key=value&page=42

And the "path" refers to the URL without that query string. Here /products/page/2 is a path.

When setting reloadOnSearch: false you're telling angular not to reload the view and the associated controller when only the query string parameters changes.

• So if the path changes, for instance you navigate from /products/page/2 to /products/page/3, then the view will still be reloaded. No $routeUpdate will be fired because there is no need for that. You'll get the new parameters from $routeParams when your controller initialization function is called again.
• However if the path doesn't change, but only the query string parameters do change. For instance when you navigate from /products?page=2 to /products?page=3. Then the view will not be reloaded and a $routeUpdate will be broadcast.

So the solution here would be to define page as a query string parameter instead of a path parameter:

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]);

Controller:

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)
}

回答2:

Instead of $routeUpdate, try to use $routeChangeSuccess.

$scope.$on('$routeChangeSuccess', function (scope, next, current) {
    console.log("Your text goes here.");
});

You can use next and current to check your previous and next route. Hope it helps.