Question

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

我已经阅读了Angular $window和$location文档，但我无法通过客户端应用实现我想要的目标。

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

有效过滤器存储在SessionStorage（来自$sessionStorage的{{1}}）。

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

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

这是?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

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

我试着像这样清空before: ?f=THE_HASH after: ?f=THE_HASH对象：

location.search

这实际上有效，但我不喜欢它，因为它从GET查询中删除所有元素，如果我需要添加更多不应该以这种方式清理的参数，这可能会导致将来出现问题..

<小时/> 可以提供有关我的搜索背景的其他问题：

This;
This。

<小时/> 正如@Chris建议我尝试启动：

$scope.clearFilters = function(){

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

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

1 个答案: