使用瀏覽器通過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文檔非常有幫助。 本文也很有幫助。