Angular.js-如何動態更改url參數

Question

我試圖通過將每行的一些參數傳遞給url來更改依賴於ng-click事件的url參數。

網址應如下所示：

/catalog/?name=pc-computers-laptops&action=main_category&currentPage=1&pageSize=50

<ul class="menu-category">
    {% for category in g.category %}
        <li class="has-submenu">
            <a href="javascript:void(0)" class="text-dark" ng-click="get_products({'category': {'name':'{{category.slug}}', 'action':'main_category'}, 'currentPage': currentPage, 'pageSize': pageSize})">{{category.name}} </a>
            <ul class="submenu p-5">
                <div class="row">
                    {% for sub_cat in category.sub_menu %}
                        <div class="col-sm-4 mb-5">
                            <h4><a href="javascript:void(0)" ng-click="get_products({'category':{'name':'{{sub_cat.slug}}', 'action':'second_category'}, 'currentPage': currentPage, 'pageSize': pageSize})" class="text-primary">{{sub_cat.name}}</a></h4>
                            {% for sub_under in sub_cat.unders %}
                                <li> <a href="javascript:void(0)" class="text-dark" ng-click="get_products({'category': {'name':'{{sub_under.slug}}', 'action':'third_category'}, 'currentPage': currentPage, 'pageSize': pageSize})">{{sub_under.name}} </a></li>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </ul>
        </li>
    {% endfor %}
    <li class="has-submenu">
        <a href="javascript:void(0)" class="text-primary" ng-click="currentPage = 1; get_products({'currentPage': currentPage, 'pageSize': pageSize, 'action': 'All'})">All categories </a>
    </li>
</ul>

如您所見，在這里我還有另一個子類別，其中ng-click已經在每行上設置了。

$scope.get_products = function(obj){

    if(Object.values($scope.getParams(window.location))[0] !== 'undefined'){        
        if(Object.keys($scope.getParams(window.location)).length != 0){
            var params = {
                    name:obj.category.name,
                    action:obj.category.action,
                    currentPage:$scope.currentPage,
                    pageSize:$scope.pageSize
                },
                query = Object.entries(params).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&'),
                newUrl = window.location.pathname + '?' + query
            window.history.pushState(newUrl, "dynamicUrl", "Category")
        }
    }

    $scope.promise = sendRequest.sendObject('/fetch-products', JSON.stringify(obj), config)
    $scope.promise.then(function(response) {
        if (response){
            $scope.products = response.data
            if($scope.products.length == 0){
                $scope.response_text = 'No results.'
            }
            $scope.totalProducts = response.total
            if (response.error){
                $scope.response_text = response.error
            }
        }
    }, function(err) {
        console.log(err)
    })
}

通過那個window.history.pushState並沒有改變URL中的任何內容，順便說一句，我沒有使用$locationProvider.html5Mode它只是AngularJS和Flask應用程序之間的組合。

值得一提的是，Flask處理的不是Angular路線。

Answer 1

答案很簡單，我需要啟用$locationProvider.html5Mode但要使用rewriteLinks: false這樣就不會更改當前的URL路徑，然后執行以下操作：

$window.history.pushState("Category", "dynamicUrl", newUrl)