如何防止ui-bootstrap分页控件更改url路由答案

【问题标题】：how to prevent ui-bootstrap pagination control from changing the url route如何防止ui-bootstrap分页控件更改url路由
【发布时间】：2016-10-06 09:57:25
【问题描述】：

在我的应用程序中，我有两个视图 search 和 masternameserch，这些视图在 app.js 中定义为：

    $stateProvider
        .state('search', {
            url: '/',
            controller: 'searchController',
            controllerAs: 'search',
            templateUrl: '/app/views/search.html'
        })
        .state('searchmasterName', {
            url: '/searchmastername',
            controller: 'searchMasterNameController',
            controllerAs: 'masternameSearch',
            templateUrl: '/app/views/searchmastername.html'
        })

在我看来，我将 ui-bootstrap 分页控件设置为

 <div class="text-center">
                <uib-pagination ng-show="masternameSearch.pgTotalItems > 10" total-items="masternameSearch.pgTotalItems" ng-click="masternameSearch.pageChanged(); $event.stopPropagation();" ng-model="masternameSearch.pgCurrentPage" class="pagination-md" max-size="masternameSearch.pgMaxSize" boundary-links="true"></uib-pagination>
            </div>

在控制器中，我的 pageChanged() 函数设置如下：

 vm.pageChanged = function () {
            var pageRequest = buildMasterNameSearchRequest(); //get cached request
            pageRequest.pageFrom = vm.pgCurrentPage; //set page number to request 

            var currentPath = $state.current.name;

            searchService.postSearchRequest(pageRequest).then(renderResults, onError);
            $state.go('searchmastername',
            {},
            {
            notify: false,
            location: false,
            inherit: false,
            reload: false 
        });
            $timeout(function () { location.hash = '#top' }, 1000);
        }

我遇到的问题是，每当单击分页控件时，底层 URL 始终是根 URL。因此，当我单击分页按钮时，搜索会执行，但我会导航回错误的默认主视图。正如您从代码中看到的那样，我首先尝试在指令本身中将 onchange 更改为 ng-click 事件，并尝试停止传播以停止通过 $event 的重定向。这没有用。我尝试的第二件事是在pageChanged() 函数中调用状态转换/state.go()，我基本上重新加载了视图。但是，这不起作用，因为它会引发无法找到状态的错误。遗憾的是，这实际上阻止了页面重新加载或导航到主页，因此该错误实际上使页面按最终用户可能期望的方式工作，但是在缺少状态周围产生错误，我知道这是不正确的。

更新：错误是由类型 searchmastername 而不是 searchmasterName 生成的。

进行此更改修复了错误，但仍会导致站点重定向到要加载的默认视图。

任何人都可以提供一个想法或方法，通过在单击时将我重定向到默认主视图来使分页控件不引起导航事件？

-干杯

【问题讨论】：

标签： angularjs pagination angular-ui-router angular-ui-bootstrap

【解决方案1】：

在对这个问题进行了更多研究之后，我认为可以通过监听 stateChangeStart 事件的 $rootScope 并从那里添加一个 preventDefault() 函数来阻止导航在我所做的路线中发生。

所以代码现在在 pageChanged() 函数上看起来像这样

vm.pageChanged = function () {
    var pageRequest = buildMasterNameSearchRequest(); //get cached request
    pageRequest.pageFrom = vm.pgCurrentPage; //set page number to request 

    searchService.postSearchRequest(pageRequest).then(renderResults, onError);
    $rootScope.$on('$stateChangeStart',
        function(event) {
            event.preventDefault();
        });

    $timeout(function () { location.hash = '#top' }, 1000);
}

虽然有用，但使用 preventDefault() 会停止与页面的所有进一步交互。链接将不再起作用等。我以为我已经修复了，但我刚刚停止了事件，所以超时从未被调用，这是罪魁祸首。

我自己做的真正问题是添加超时并使用位置路由#。

 $timeout(function () { location.hash = '#top' }, 1000);

使用此功能实际上（按设计）更改了我的 URL 中的路由并将我导航到主视图。我需要能够滚动到顶部，所以我将超时功能更改为如下所示

 vm.pageChanged = function () {
            vm.showPager = false;
            var pageRequest = buildMasterNameSearchRequest(); //get cached request
            pageRequest.pageFrom = vm.pgCurrentPage; //set page number to request 
            searchService.postSearchRequest(pageRequest).then(renderResults, onError);
            window.scrollTo(0, 0);

        }

使用window.scroll实现了同样的滚动效果，但没有改变路径。

【讨论】：