Angular UI-Router-查詢字符串中的空$ stateparams

Question

在index.html導航html中，我有一個搜索框：

<div class="input-group custom-search-form">
    <input type="text" class="form-control" ng-model="vm.q" placeholder="Search...">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" ng-click="vm.search()">
            <i class="fa fa-search"></i>
        </button>
    </span>
</div>

在導航控制器中，我處理按鈕單擊：

function search() {
    $state.go("search", { q: vm.q});
}

UI路由器具有以下路線：

.state("search", {
    url: "/search?:q",
    templateUrl: "/app/search/search.html",
    controller: "search",
    controllerAs: "vm"
})

在我的search控制器中，一切正常，我可以使用以下代碼：

vm.searchQuery = $stateParams.q;

現在，如果我打開瀏覽器並導航到/search?q=test ，那么我希望在搜索框中填充查詢字符串參數中的內容。 我本以為這只是將導航控制器更改為以下情況的一種情況：

vm.q = $stateParams.q;
function search() {
    $state.go("search", { q: vm.searchQuery});
}

但是$stateParams為空： {} 。

缺少什么/錯了？

Answer 1

如果您不使用html5Mode，則需要在/#!/之后附加參數，因此可能需要嘗試以下URL： /search/!#/?q=test才能正確獲取$stateParams 。