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

Что касается $location.search, docs говорят,

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

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

ОТВЕТЫ

Ответ 1

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

$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

Ответ 2

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

Ответ 3

$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);    
}]);

Ответ 4

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

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

Ввести функцию определения местоположения $в контроллер

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

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

Ответ 5

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

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');

Ответ 6

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

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

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

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

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

Ссылки:

Ответ 7

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

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

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

Ответ 8

В моем примере NodeJS у меня есть url "localhost: 8080/Lists/list1.html? x1 = y", который я хочу пройти и получить значения.

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

  • script источник angular -route.js
  • Ввести "ngRoute" в зависимости от вашего приложения.
  • Конфигурируйте ваше местоположениеProvider
  • Добавьте базовый тег для $location (если вы этого не сделаете, ваш поиск(). x1 ничего не вернет или undefined. Или, если у базового тега неверная информация, ваш браузер не сможет найти ваш файлы внутри script src, которые нужны вашему .html. Всегда открывайте источник просмотра страницы, чтобы проверить расположение файлов!)
  • вызвать службу определения местоположения (search())

my 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();
    });

и мой список1.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

Ответ 9

Мое исправление более простое, создайте factory и реализуйте как одну переменную. Например

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>