javascript - 使用 UI Router 进行分页时如何更改 URL？

Question

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

我有一个数据表，一次显示一页，并且我有分页指令显示正确的页面链接数。当您单击链接时，它会获取新的页码并调用 Restangular 来获取新记录并将它们绑定(bind)到表中。

一切正常，但很明显，当您翻阅数据时，URL 不会更改，因此用户无法使用浏览器的后退/前进按钮来浏览他们的历史记录。理想情况下，我想使用以下 URL:

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

我还想在 URL 中包含排序，但这是另一个问题。

我可以实现这一点，但是通过在单击其中一个分页按钮时手动转换到一个新状态，但这会重新加载 Controller 及其所有内容，对服务器进行额外的 ajax 调用，并使 un-样式化内容，因为它重新创建了分页控件等。

理想情况下，我可以更改 URL 并添加历史状态，但不会触发实际状态更改并重新加载/运行该 View 的 Controller 。我不确定这是否可能，更不用说如何去做了。

有人有什么想法吗？

Answer 1

这很容易通过 $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 轻松实现