AngularJS内のlocation.searchからアイテムを削除します

ここにはこのような疑問がたくさんありますが、これまでの回答はどれも役に立ちませんでした。AngularJS内のlocation.searchからアイテムを削除します

私はAngular $windowと$locationドキュメントを読んだことがありますが、私は自分のクライアントアプリケーションから欲しいものを達成できません。

ユーザーが複数のフィルタを設定して共有できるWebページがあるとします。共有はGETパラメータ?f=AN_HASHを介して動作し、渡されたハッシュと一致するフィルタセットで返信するサーバにクエリをトリガします。

アクティブフィルタはSessionStorage（$sessionStorageからngStorage）に格納されます。

最終的に、ユーザーは現在のフィルタセットをボタンでクリアできます。このボタンによってトリガ予想される流れは次のようになります。

クリアセッション格納項目

クリアURLクエリパラメータ?f=（将来的には複数のパラメーターがあるかもしれないので、私はこれを削除したいです）

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

：

ページ

これをリロードはng-clickに呼び出される関数です

2つの間にconsole.logあなたは私がこれまでに試したものを見つけることができます。 2つのコンソールログを出力し、以下：どうやら何も変わっていない

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

..私はちょうどこのようlocation.searchオブジェクトを空にすることによって試さ

（また、アドレスバーにGETクエリがまだあるが）。

$scope.clearFilters = function(){ 

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

これは、実際に働いていたが、それはGETクエリからすべての要素を削除し、私が今までいけないより多くのパラメータを追加する必要がありますならば、これは将来的に問題につながる可能性があるので、私はそれを好きではありませんあなたはきれいにされたsの道...私の検索についての背景を提供することができます

その他の質問：

This。
This。

@クリスは、私が起動しようとした示唆したように： angular.element(document.body).injector().get('$location').search("f",null)

URLのGETが影響されていません。添付された画像には、私がChromeコンソールから得たものがあります。 PlunkerとJsbinはあなたがURL paramsはを変更するときに、ここで、それを好きにいないようだ

出典

2016-04-13 FredMaggiowski

'$ location.search（ 'f'、null）;'は機能しませんか？ – Chris

2つの 'console.log'の間にコメントされたものは何もありません。Angularのドキュメントを理解している限り、考えてください。 – FredMaggiowski

' $ location.search（） '以外のものをすべて削除するとどうなりますか？まだ動作しませんか？そうでない場合は、Chromeコンソールからこれを単独で使用するかどうかを試してみてください。 'angle.element（document.body）.injector（）。get（' $ location '）。search（ "f"、null） ' – Chris

は、ローカルファイルにコピー＆ペーストするためのコードです。

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

出典

2016-04-18 10:57:16 C14L

ありがとう、私はこれをできるだけ早く試してみて、あなたに結果を知らせてください:) – FredMaggiowski

それは働いた！ありがとうございました！ :) – FredMaggiowski

AngularJS内のlocation.searchからアイテムを削除します

答えて

関連する問題