Получение значений из строки запроса в URL-адресе с использованием AngularJS $ location

95

Что касается $ location.search, в документах говорится:

Возвращает часть поиска (как объект) текущего URL-адреса при вызове без каких-либо параметров.

В моем URL-адресе в моей строке запроса есть параметр? Test_user_bLzgB без значения. Также "$ location.search ()" возвращает объект. Как мне получить фактический текст?

javascript angularjs Ян Уорбертон
источник
Какой объект вы получите? Есть ли у вас плункер или скрипка, демонстрирующая проблему, с которой вы сталкиваетесь? Вы правы, когда используете, $location.search()но я хочу проверить "объект", который вы получаете, когда вызываете его ...
callmekatootie 06
Я не знаю, что это за объект. Я попытался перечислить свойства, но, похоже, их нет.
Ian Warburton
Не знаю, как сделать скрипт, проверяющий строку запроса.
Ian Warburton

Ответы:

152

Не уверен, изменилось ли оно с момента принятия принятого ответа, но это возможно.

$location.search()вернет объект пар ключ-значение, тех же пар, что и строка запроса. Ключ, не имеющий значения, просто сохраняется в объекте как истинный. В этом случае объектом будет:

{"test_user_bLzgB": true}

Вы можете получить доступ к этому значению напрямую с помощью $location.search().test_user_bLzgB

Пример (с большей строкой запроса): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Примечание: из-за хэшей (поскольку он перейдет на http://fiddle.jshell.net/#/url , который создаст новую скрипку), эта скрипка не будет работать в браузерах, которые не поддерживают историю js (не будет работать в IE <10)

Изменить:
как указано в комментариях @Naresh и @DavidTchepak, $locationProviderтакже необходимо правильно настроить: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

TheSharpieOne
источник
3
Как упоминал Нареш, $locationProviderтакже необходимо правильно настроить: code.angularjs.org/1.2.23/docs/guide/… (Это меня сбило с толку . Надеюсь, эта ссылка еще немного спасет других.)
Дэвид Чепак
2
Для настройки поставщика местоположения вам потребуется: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true]. Также вам понадобится базовый тег в HTML-файле: <base href = "/">
Амин Ариана
Спасибо за вдохновение и полезные советы, просто поделитесь моим случаем. Я создаю константу с именем userConfig и помещаю все внутрь, некоторые настройки могут быть переопределены строкой запроса для гибкости пользователя. Я использую это и помещаю запрос в переменную области globalController, которая находится в теге HTML, поэтому любой дочерний контроллер может принимать параметр, включая службу. Поскольку userConfig также помещается в Service. Таким образом, виртуально они могут взаимодействовать вместе.
simongcc
Мне показалось, что проще использовать js-функцию, $ location.search () имеет много движущихся частей. Существует множество примеров кода для получения параметров строки запроса.
nuander
@TheSharpieOne, если у вас будет минутка, не могли бы вы взглянуть на этот вопрос? stackoverflow.com/questions/43121888/…
Леон Габан
48

Если вам просто нужно смотреть на строку запроса как на текст, вы можете использовать: $window.location.search

Андерш
источник
11
Как это не ответ? Может быть, он коротковат, но , похоже, отвечает на вопрос.
Лео Лам
Если вы проверите отметки времени, ответ был отредактирован через 2 часа после комментария Дэна. Это действительно не так важно, но меня шокировало то, что за комментарий Лео проголосовали, поэтому я подумал, что укажу на него.
Билл Тарбелл,
40

$location.search()возвращает объект, состоящий из ключей как переменных и значений как его значения. Итак: если вы напишете строку запроса следующим образом:

?user=test_user_bLzgB

Вы могли легко получить такой текст:

$location.search().user

Если вы не хотите использовать ключ, например? Foo = bar, я предлагаю использовать хеш #test_user_bLzgB,

и звонит 

$location.hash()

вернет test_user_bLzgB - данные, которые вы хотите получить.

Дополнительная информация:

Если вы использовали метод строки запроса и получаете пустой объект с помощью $ location.search (), это, вероятно, связано с тем, что Angular использует стратегию hashbang вместо html5 ... Чтобы заставить ее работать, добавьте эту конфигурацию в свой модуль 

yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);
Алехандрочиатти
источник
13

Сначала сделайте формат URL-адреса правильным, чтобы строка запроса использовала #? Q = string, которая работает для меня

http://localhost/codeschool/index.php#?foo=abcd

Внедрить службу $ location в контроллер

app.controller('MyController', [ '$location', function($location) { 

    var searchObject = $location.search();

    // $location.search(); reutrn object 
    // searchObject = { foo = 'abcd' };

    alert( searchObject.foo );

} ]);

Таким образом, выход должен быть abcd

МасудУрРехман
источник
10

вы также можете использовать это

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var queryValue = getParameterByName('test_user_bLzgB');
Ролвин Краста
источник
3
Вы скопировали эту функцию из другого ответа SOF ... лучше всего ссылаться на свой источник.
arcseldon
Да, это то, что я использую, получил это откуда-то на SO
nuander
10

Если у вас $location.search()не работает, убедитесь, что у вас есть следующее:

1) html5Mode(true)настраивается в конфигурации модуля приложения

appModule.config(['$locationProvider', function($locationProvider) {
   $locationProvider.html5Mode(true);
}]);

2) <base href="https://stackoverflow.com/">присутствует в вашем HTML

<head>
  <base href="/">
  ...
</head>

Ссылки:

  1. base href = "/"
  2. html5Mode
Махеш
источник
«html5Mode (true) настроен в конфигурации модуля приложения» - пояснение
15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett - Извините, я хотел сказать, что он настроен в методе config объекта приложения angular. Например, вот он: var appModule = angular.module ('myAppModule', []);
Махеш
Спасибо, я новичок в Angular
15ee8f99-57ff-4f92-890c-b56153
Да, это так важно, столкнулся с той же проблемой,
Бахадир Тасдемир
7

Angular не поддерживает такую ​​строку запроса.

Предполагается, что запрашиваемая часть URL-адреса представляет собой &разделенную последовательность пар ключ-значение, поэтому ее можно прекрасно интерпретировать как объект.

Нет вообще никакого API для управления строками запроса, которые не представляют наборы пар ключ-значение.

переписанный
источник
0

В моем примере NodeJS у меня есть URL-адрес «localhost: 8080 / Lists / list1.html? X1 = y», по которому я хочу пройти и получить значения.

Чтобы работать с $ location.search () и получить x1 = y, я сделал несколько вещей.

  1. источник скрипта для angular-route.js
  2. Вставьте ngRoute в зависимости модуля вашего приложения
  3. Настройте свой locationProvider
  4. Добавьте базовый тег для $ location (если вы этого не сделаете, ваш search (). X1 ничего не вернет или не вернет undefined. Или, если базовый тег содержит неверную информацию, ваш браузер не сможет найти ваши файлы внутри скрипта src, который ваш .html необходим. Всегда открывайте источник просмотра страницы, чтобы проверить расположение файлов!)
  5. вызвать службу определения местоположения (поиск ())

мой list1.js имеет

    var app = angular.module('NGApp', ['ngRoute']);  //dependencies : ngRoute
    app.config(function ($locationProvider) { //config your locationProvider
         $locationProvider.html5Mode(true).hashPrefix('');
    });

    app.controller('NGCtrl', function ($scope, datasvc, $location) {// inject your location service
        //var val = window.location.href.toString().split('=')[1];
        var val = $location.search().x1;    alert(val);
        $scope.xout = function () {
           datasvc.out(val)
           .then(function (data) {
              $scope.x1 = val;
              $scope.allMyStuffs = data.all;
           });
        };
        $scope.xout();
    });

и мой list1.html имеет

<head>
    <base href=".">
    </head>
<body ng-controller="NGCtrl">
<div>A<input ng-model="x1"/><br/><textarea ng-model="allMyStuffs"/></div>
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="list1.js"></script>
</body>

Руководство: https://code.angularjs.org/1.2.23/docs/guide/$location

Дженна Лиф
источник
0

Мое исправление проще: создать фабрику и реализовать как одну переменную. Например

angular.module('myApp', [])

// This a searchCustom factory. Copy the factory and implement in the controller
.factory("searchCustom", function($http,$log){    
    return {
        valuesParams : function(params){
            paramsResult = [];
            params = params.replace('(', '').replace(')','').split("&");
            
            for(x in params){
                paramsKeyTmp = params[x].split("=");
                
                // Si el parametro esta disponible anexamos al vector paramResult
                if (paramsKeyTmp[1] !== '' && paramsKeyTmp[1] !== ' ' && 
                    paramsKeyTmp[1] !== null){          
                    
                    paramsResult.push(params[x]);
                }
            }
            
            return paramsResult;
        }
    }
})

.controller("SearchController", function($scope, $http,$routeParams,$log,searchCustom){
    $ctrl = this;
    
    var valueParams = searchCustom.valuesParams($routeParams.value);
    valueParams = valueParams.join('&');

    $http({
        method : "GET",
        url: webservice+"q?"+valueParams
    }).then( function successCallback(response){
        data = response.data;
        $scope.cantEncontrados = data.length; 
        $scope.dataSearch = data;
        
    } , function errorCallback(response){
        console.log(response.statusText);
    })
      
})
<html>
<head>
</head>
<body ng-app="myApp">
<div ng-controller="SearchController">
<form action="#" >
                          
                            
                            <input ng-model="param1" 
                                   placeholder="param1" />
                            
                            <input  ng-model="param2" 
                                    placeholder="param2"/>
                        
<!-- Implement in the html code 
(param1={{param1}}&param2={{param2}}) -> this is a one variable, the factory searchCustom split and restructure in the array params
-->          
                        <a href="#seach/(param1={{param1}}&param2={{param2}})">
                            <buttom ng-click="searchData()" >Busqueda</buttom>
                        </a>
                    </form> 
</div>
</body>
Развернуть фрагмент

Иван Фретес
источник