Удалить элемент из местоположения. Искать в AngularJS

Здесь на SO есть много таких вопросов, как этот, но ни один из ответов не помог мне до сих пор.Удалить элемент из местоположения. Искать в AngularJS

Я читал документы Angular $window и $location, но я не могу добиться того, чего хочу от своего клиентского приложения.

Предположим, у меня есть веб-страница, где пользователь может устанавливать несколько фильтров и делиться ими, общий доступ работает через параметры GET. ?f=AN_HASH это вызывает запрос на мой сервер, который отвечает набором фильтров, соответствующим прошедшему хешу.

Активные фильтры хранятся в SessionStorage (через $sessionStorage от ngStorage).

В конце концов пользователь может очистить текущий фильтр, установленный с помощью кнопки. Ожидаемый поток запускается с помощью этой кнопки должно быть: пункт

Clear Session Storage
Очистить параметр 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, и это может привести к проблемам в будущем, если я когда-нибудь понадобится, чтобы добавить больше параметров, которые не должны были очищены s способ ..

Другой вопрос, который может предоставить фон о моих поисков:

This;
This.

Как предложил я @ Крис попытался запуска: angular.element(document.body).injector().get('$location').search("f",null)

URL-адрес GET не пострадал. В прикрепленном изображении есть то, что я получил от консоли Chrome.

источник

2016-04-13 FredMaggiowski

Действительно ли '$ location.search ('f', null);' не работает? – Chris

Ничего из того, что прокомментировано между двумя 'console.log', работало. Должно быть, насколько я понял Angular doc, подумал – FredMaggiowski

Что произойдет, если вы удалите все, кроме вызова' $ location.search() ', он все еще не работает? Если вы не пытаетесь использовать это с консоли Chrome, чтобы убедиться, что она работает изолированно: 'angular.element (document.body) .injector(). Get ('$ location'). Search (" f ", null)' – Chris

Plunker и Jsbin, кажется, не нравится, когда вы измените URL Params, так вот код, скопировать и вставить в локальный файл.

<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

ответ

Смежные вопросы