如何使用路由器的用户界面分页时更改URL？ [英] How to change the URL when paging using UI Router?

问题描述

我采用了棱角分明的UI路由器这是会很大，但我想实现UI分页引导指令，并不能制定出正确的战略有一个角JS项目。

I have an Angular JS project using Angular UI-Router which is going great but I am trying to implement the UI Bootstrap pagination directive and can't work out the correct strategy.

我有数据表一次显示1页，我有到位的分页显示指令页面链接的正确数目。当你点击它获得新的页码链接，使得对API调用Restangular以获得新的记录，并将其绑定到表中。

I have a table of data shown 1 page at a time and I have the pagination directive in place showing the correct number of page links. When you click a link it gets the new page number and makes a Restangular call to the api to get the new records and binds them to the table.

这一切运作良好，但很明显，当你通过数据的URL不会改变，因此用户无法使用浏览器的后退/前进按钮来浏览他们的历史页面。理想情况下，我想请使用以下URL：

That's all working well, but obviously when you page through the data the URL doesn't change so the user can't use the browser back/forward buttons to navigate their history. Ideally I would like to use the following URLs:

/contacts
/contacts/page-2
/contacts/page-3

我也想在URL中包括排序，但是那是另外一个问题。

I would also like to include sorting in the URL but that's another question.

我能做到这一点，但手动转换到新的状态时，点击分页按钮中的一个，但是这将重新加载控制器和它的所有内容，使更多的AJAX调用服务器并使得非丑闪烁风格的内容，因为它重新分页控制等。

I could achieve this but by manually transitioning to a new state when one of the pagination buttons is clicked, but that would reload the controller and all of it's contents, making additional ajax calls to the server and making ugly flashes of un-styled content as it recreated the pagination control etc.

在理想情况下，我将能够更改URL，并添加一个历史状态，但没有产生实际状态的变化和重新加载/运行该视图的控制器。我不知道这甚至有可能，更不用说如何做到这一点。

Ideally I would be able to change the URL and add a history state but without triggering an actual state change and reloading/running the controller for that view. I'm not sure if this is even possible, let alone how to do it.

任何人有什么想法？

推荐答案

这是$ stateParams容易实现的。

This is easily achievable with $stateParams

例如

$stateProvider
.state('contacts',{
 url: '/contacts',
 templateUrl: 'contacts.html'
}).state('contacts.paginated', {
    url: "/contacts/page-:pageNum",
    templateUrl: 'contacts.html',
    controller: function ($stateParams) {
        // If we got here from a url of /contacts/page-2
        expect($stateParams).toBe({pageNum: 2});
    }
})

我会然而选择不同的分页方案
无论/联系人/页/ 1 /联系人页面= 1？
两者都容易实现与UI路由器

I would choose a different pagination scheme however Either /contacts/page/1 or /contacts?page=1 both are easily achievable with ui-router

这篇关于如何使用路由器的用户界面分页时更改URL？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！