为什么控制器对路由更新没有响应? [英] Why controller doesn't respond on route update?

问题描述

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

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.

这是我的链接示例next.我定义了以下模块.

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

控制器

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.

推荐答案

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

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

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

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

当设置 reloadOnSearch: false 时，您告诉 angular 在仅查询字符串参数更改时不要重新加载视图和关联的控制器.

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

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

• 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.

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

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

控制器:

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

这篇关于为什么控制器对路由更新没有响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！