Question

我有一个使用Angular UI-Router的Angular JS项目，虽然很好，但我正在尝试实现UI Bootstrap分页指令，但无法确定正确的策略。

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

这一切都运行良好，但显然当您浏览数据时，URL不会更改，因此用户无法使用浏览器后退/前进按钮来浏览其历史记录。理想情况下，我想使用以下网址：

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

我还想在网址中加入排序，但这是另一个问题。

我可以实现这一点，但是当点击其中一个分页按钮时，手动转换到新状态，但这将重新加载控制器及其所有内容，对服务器进行额外的ajax调用，并使得丑陋的闪烁样式内容，因为它重新创建了分页控件等。

理想情况下，我可以更改URL并添加历史状态，但不会触发实际的状态更改并重新加载/运行该视图的控制器。我不确定这是否可行，更不用说怎么做了。

有人有任何想法吗？

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

可以很容易地实现这两个目标

如何在使用UI路由器进行分页时更改URL？

1 个答案: