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

【问题标题】：Remove item from location.search in AngularJS从 AngularJS 中的 location.search 中删除项目
【发布时间】：2016-04-13 09:00:13
【问题描述】：

这里有很多类似这样的问题，但到目前为止没有一个答案对我有帮助。

我已阅读 Angular $window 和 $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 控制台获得的内容。

【问题讨论】：

$location.search('f', null); 不起作用吗？
两个console.log 之间的评论没有任何效果。据我了解Angular 文档，它应该认为
如果您删除除$location.search() 调用之外的所有内容，它仍然不起作用吗？如果不尝试从 Chrome 控制台使用它，看看它是否单独工作angular.element(document.body).injector().get('$location').search("f",null)
嘿，我看到了您的编辑，我在我的一个应用程序上对其进行了测试，它在 URL 更改时可以正常工作。你的网址完全没有变化吗？
遗憾的是根本没有。@C14L 解决方案有效，我认为问题与缺少 <base> 标签有关。在它的答案之前我没有它，现在我已经添加了它工作的标签..甚至认为 chrome 控制台中的脚本具有相同的行为（在打印图像中的信息时不更改 URI）跨度>

标签： javascript angularjs url get session-storage

【解决方案1】：

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

<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>

【讨论】：

谢谢，我会尽快试试，然后告诉你结果:)