使用浏览器通过ui-router在angularjs应用中导航回去？

Question

这是我的情况。

1. 通过“ /customers”（app.customers）搜索客户，说我搜索“ bob”
2. 单击结果之一以转到“ /customers/detail/:id”（app.customers.detail）。
3. 在浏览器中单击后退按钮，这会将我重定向到没有搜索结果的“ / customers”页面。

我怎样才能使其正常工作，以便在我回击时转到使用原始搜索文本“ bob”显示客户搜索结果的页面？

我看过这篇文章，但是我真的必须创建会话服务，状态历史记录服务和状态位置服务吗？ 似乎应该有一种更简单的方法来使其起作用。 谢谢。

Answer 1

正确的答案是您需要根据搜索到的数据更改URL。 当您搜索“鲍勃”时，请更改URL以使其匹配： /customers?q=bob并转到处理该问题的路由（或仅使您的一条路由能够处理可选的查询参数）。 这使您可以使用浏览器的状态处理程序，以便Back到/customers?q=bob时可以进行处理。

如果您不想以浏览器本机支持（url）的方式进行操作，则必须使用服务等手动进行操作，这很痛苦。

Answer 2

感谢Dan，我接受了您的建议，现在在URL中有了搜索参数。 这是现在的网址：

本地主机/＃/ customers？searchText = test＆pageSize = 25＆pageNumber = 1

..这是我在ui-router中的更新状态。 params部分设置默认值，如果URL参数与默认值匹配，则“挤压” URL参数。

.state("app.customers", {
    url: "/customers?searchText&pageSize&pageNumber",
    params: {
        searchText: { value: "", squash: true },
        pageSize: { value: 25, squash: true },
        pageNumber: { value: 1, squash: true }
    },
    controller: "customersController as vm",
    templateUrl: "customers.html",
    resolve: {
        customerService: "customerService",
        customers: function (customerService, $stateParams) {
            if ($stateParams.searchText) {
                return customerService.search($stateParams.searchText, parseInt($stateParams.pageSize), parseInt($stateParams.pageNumber));
            } else {
                //return empty array and default pager
                return null;
            }
        },
    }
})

..现在在用户页面上，当用户单击搜索按钮时，我只需在控制器的search（）方法中执行此操作。

$state.go("app.customers", { searchText: vm.searchText, pageSize: vm.pager.pageSize, pageNumber: pageNumber });

此ui-router的UrlMatcher文档非常有帮助。 本文也很有帮助。