为什么控制器对路由更新没有响应？

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

Answer 2

尝试使用 $routeChangeSuccess，而不是 $routeUpdate。

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

您可以使用 next 和 current 来检查您的上一个和下一个路线。 希望对您有所帮助。