Question

在我的应用程序中，我有两个视图搜索和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而非searchmaster N 生成的。

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

有人可以通过在点击时将我重定向到默认主视图来提供一个想法或方法来让分页控件不导致导航事件吗？

-cheers

Answer 1

在做了一些关于这个问题的研究后，我认为可以通过监听$ rootScope for stateChangeStart事件来解决这个问题，并从那里添加一个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完成相同的滚动效果，但没有改变路线。

如何防止ui-bootstrap分页控制改变url路由

1 个答案: