从 AngularJS 中的 location.search 中删除项目

Question

这里有很多像这样的问题，但到目前为止 none 的答案对我有帮助。

我已经阅读了 Angular $window and $location 文档，但我无法从我的客户端应用程序中实现我想要的。

假设我有一个网页，用户可以在其中设置多个过滤器并共享它们，共享通过 GET 参数进行 ?f=AN_HASH 这会触发对我的服务器的查询，该查询会回复与传递的过滤器集匹配的过滤器散列。

活动过滤器存储在 SessionStorage 中（通过 $sessionStorage 从 ngStorage）。

最终用户可以通过按钮清除当前过滤器设置。此按钮触发的预期流量应为：

清除会话存储项目
清除 url 查询参数 ?f=（我只想删除这个，因为将来可能会有多个参数）
重新加载页面

这是在 ng-click 上调用的函数：

$scope.clearFilters = function(){

    $sessionStorage.queryFilters = {} // Empty SessionStorage
    $scope.activeFilters = false      // Disable Clear button

    console.log('before:', location.search)

    // $location.search({})
    // $location.search('f', null)
    // $location.search('f', null).replace()

    console.log('after:', location.search)

    $window.location.reload() // reload the page
}

在这两个 console.log 之间，您可以找到我到目前为止尝试过的内容。两个控制台日志打印如下：

before: ?f=THE_HASH
after: ?f=THE_HASH

显然什么都没有改变..（地址栏中的 GET 查询仍然存在）

我试过像这样清空 location.search 对象：

$scope.clearFilters = function(){

    $sessionStorage.queryFilters = {} // Empty SessionStorage
    $scope.activeFilters = false      // Disable Clear button
    location.search = ''              // Reset location.search and reload page
}

这确实有效，但我不喜欢它，因为它从 GET 查询中删除了所有元素，如果我需要添加更多不应清除的参数，这可能会在将来导致问题这样..

可以提供有关我的搜索背景的其他问题：

This;
This.

正如@Chris 建议的那样，我尝试启动： angular.element(document.body).injector().get('$location').search("f",null)

url GET 没有受到影响。在所附的图片中，我从 Chrome 控制台得到了什么。

Answer 1

当您更改 URL 参数时，Plunker 和 Jsbin 似乎不喜欢它，所以这里是复制粘贴到本地文件的代码。

<html lang="en" ng-app="myApp">
    <head>
      <base href="/">
      <meta charset="utf-8">
      <title>My AngularJS App</title>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-route.min.js"></script>
    </head>

    <body>
      <div ng-controller="myCtrl">
        <button ng-click="setFltr()">set filter</button>
        <button ng-click="clrFltrVal()">clear only the value</button>
        <button ng-click="clrFltrAll()">clear entire f filter</button>
      </div>
    </body>

    <script>'use strict';

angular.module('myApp', ['ngRoute']).config(
    ['$locationProvider', function ($locationProvider) {

  $locationProvider.html5Mode(true).hashPrefix('');
}]);

angular.module('myApp').controller('myCtrl', 
    ['$scope', '$location', '$window', 
    function ($scope, $location, $window) {

  $scope.setFltr = function () {
    $location.search('f', 'something');
    $window.location.reload();
  }

  $scope.clrFltrAll = function () {
    $location.search('f', null);
    $window.location.reload();
  }

  $scope.clrFltrVal = function () {
    $location.search('f', '');
    $window.location.reload();
  }
}]);


    </script>
</html>

从 AngularJS 中的 location.search 中删除项目

Remove item from location.search in AngularJS

javascript

url

get

session-storage

angularjs