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时，如果仅，查询字符串参数发生变化，则表示您不会重新加载视图和关联的控制器。

因此，如果路径发生变化，例如您从/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

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

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

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

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

2 个答案: