使用 UI Router 进行分页时如何更改 URL? [英] How to change the URL when paging using UI Router?

问题描述

我有一个使用 Angular UI-Router 的 Angular JS 项目，该项目进展顺利，但我正在尝试实施 UI Bootstrap 分页指令，但无法制定正确的策略.

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.

我有一个数据表，一次显示一页，并且我有适当的分页指令显示页面链接的正确数量.当您单击链接时，它会获取新的页码并对 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 不会更改，因此用户无法使用浏览器的后退/前进按钮来导航他们的历史记录.理想情况下，我想使用以下网址:

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});
    }
})

但是我会选择不同的分页方案/contacts/page/1 或/contacts?page=1两者都可以通过 ui-router 轻松实现

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

这篇关于使用 UI Router 进行分页时如何更改 URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！