如何防止ui引导程序分页控制更改url路由

Question

在我的应用程序中，我有两个视图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引导分页控制设置为

<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。

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

有人能提供一个想法或方法，通过在单击时将我重定向到默认主视图，使分页控件不会导致导航事件吗？

-欢呼

Answer 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实现了相同的滚动效果，但没有改变路线。