Question

首先，我需要说我是前端开发的新手，所以详细回答将非常有帮助。我正在尝试使用ui-routing进行分页问题。实际上，我想在URL中添加查询参数。这是我的代码：

angular.module('simpleApp', [
    'ngAnimate',
    'ui.router'
]).config(function ($locationProvider, $stateProvider, $stateProvider, $urlRouterProvider) {   
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false,
        rewriteLinks: false
    });    

$stateProvider.state('productList', {
    url: '?page',
    controller: 'productPartialController',        
    params: {
        page: {
            value: '1',
            squash: true
        }
    }
});

}）; 如您所见，它是初始化。这是控制器逻辑的一部分：

angular.module('simpleApp')
    .controller('productPartialController', ['$scope', 'productService', 'productPartialService', '$compile', '$sce', '$window', '$timeout', '$stateParams', '$state', function ($scope, productService, productPartialService, $compile, $sce, $window, $timeout, $stateParams, $state) {
     var p = parseInt($stateParams.page);
     console.log(p);
     $scope.processQuery = function (page) {
        if (page)
            $scope.pagerSettings.CurrentPage = page;   
productPartialService.getFilterPageData({  
            /*ajax params*/
            sortBy: $scope.pagerSettings.SortBy,              
            currentPage: $scope.pagerSettings.CurrentPage,  
        }).success(function (products) {
            $scope.products = products;
            processProducts();
            calculatePages();
            utils.ToTopScroll();
            if(page)
                $state.go('productList', { page: $scope.pagerSettings.CurrentPage }, { notify: false });

            console.log($stateParams.page);
    });       


    };      
}]);

我正在尝试为non rest项目添加功能并使用一些网址加载页面（例如helloworldsite.loc/phones/samsung）。当我按预期helloworldsite.loc/phones/samsung?page=4 (if $scope.pagerSettings.CurrentPage is 4), helloworldsite.loc/phones/samsung?page=3 (when $scope.pagerSettings.CurrentPage is 3), etc处理分页URL更改时。我需要说我想将这段代码用于不同的页面（页面将有不同的urls - helloworldsite.loc / phones / samsung，helloworldsite.loc / accessories等），所以url应该是绝对的，因为我了解。当我尝试点击back-next浏览器按钮时会出现问题。我尝试使用此示例非常重要：http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/和代码示例https://gist.github.com/abyx/f5ef04d807dc15617331您可以检查并且此示例工作正常。我的意思是当我点击back-next浏览器按钮时控制器重新加载，但我的控制器没有。此外，当我试图获得初始参数时（

params: {
            page: {
                value: '1',
                squash: true
            }
        }

）我收到NoN而不是1。我究竟做错了什么？谁能解释一下state应该如何运作？我已经阅读了部分文档，并且对ui-routing和History API以及History API上下文中的angular.js感到困惑。

Answer 1

问题在于这一行：

$state.go('productList', { page: $scope.pagerSettings.CurrentPage }, { notify: false });

notify: false可防止$stateChangeStart和$stateChangeSuccess事件被触发，因此状态永远不会重新加载。如果删除notify: false，则后退和下一个按钮应按预期工作，因为UI-Router默认使用窗口历史记录。

notify: false是UI-Router中的反模式，除非您别无选择，否则应该避免使用。这是直接来自Github上的UI-Router维护者的引用：

使用notify：false是一个丑陋的解决方法，因为缺乏“动态” params“在0.2.x中，我无法评论使用它的好方法（提示：我永远不会自己使用它）

默认情况下，UI-Router状态reloadOnSearch设置为true，这意味着当查询参数更改时，状态会自动重新加载。

使用ui路由进行分页。返回（下一个）浏览器按钮不会重新加载控制器

1 个答案: