Отримання значень із рядка запиту за URL-адресою за допомогою розташування AngularJS $

95

Щодо $ location.search, у документах сказано:

Повернути частину пошуку (як об’єкт) поточної URL-адреси при виклику без будь-якого параметра.

У моїй URL-адресі мій рядок запиту має параметр '? Test_user_bLzgB' без значення. Також '$ location.search ()' повертає об'єкт. Як отримати фактичний текст?

javascript  angularjs 
— Ян Уорбертон
джерело
Який предмет ви отримуєте? У вас є плагін або скрипка, яка демонструє проблему, з якою ви стикаєтесь? Ви маєте рацію, коли використовуєте, $location.search()але я хочу перевірити "об'єкт", який ви отримаєте, коли зателефонуєте йому ...
— callmekatootie
Я не знаю, що це за предмет. Я спробував перерахувати властивості, але, здається, таких немає.
— Ian Warburton
Не знаю, як зробити скрипку, яка перевіряє рядок запиту.
— Ian Warburton

Відповіді:

151

Не впевнений, чи змінився він з моменту прийняття прийнятої відповіді, але це можливо.

$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 = "/">
— Амін Ariana
Дякую за натхнення та корисні поради, просто поділіться моєю справою. Я створюю константу з назвою userConfig і поміщаю все всередину, деякі налаштування можуть бути замінені рядком запиту для гнучкості користувача. Я використовую це і розміщую запит у змінній області глобального контролера, яка міститься в тезі HTML, щоб будь-який дочірній контролер міг прийняти параметр, включаючи службу. Оскільки userConfig також поміщений у Службу. Отже, фактично вони можуть взаємодіяти разом.
— simongcc
Мені стало простіше просто використовувати функцію js, $ location.search () має багато рухомих частин. Існує безліч прикладів коду для отримання параметрів рядка запиту.
— nuander
@TheSharpieOne, якщо у вас є хвилина, чи не могли б ви поглянути на це питання? stackoverflow.com/questions/43121888 / ...
— Leon Габа
48

Якщо вам просто потрібно розглянути рядок запиту як текст, ви можете використовувати: $window.location.search

— андерш
джерело
11
Як це не відповідь? Можливо, це трохи коротко, але , здається, воно відповідає на питання.
— Лео Лам
Якщо перевірити позначки часу, відповідь було відредаговано через 2 години після коментаря Дана. Це насправді не настільки важливо, але я знайшов шокуюче, що коментар Лео став прихильним, тому я подумав, що зазначу це.
— Білл Тарбелл
39

$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 = рядок, який працює для мене

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

} ]);

Тож викладене слово має бути абз

— MasoodUrRehman
джерело
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 (істина) налаштовано в модулі конфігурації додатка" - поясніть
— 15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett - Вибачте, я хотів сказати, що це налаштовано в методі конфігурації кутового об'єкта програми. Наприклад, це: 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. Налаштуйте своє місце розташування
  4. Додайте базовий тег для $ location (якщо ви цього не зробите, ваш пошук (). X1 нічого не поверне або не визначено. Або якщо базовий тег містить неправильну інформацію, ваш браузер не зможе знайти ваші файли в скрипті 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>
Розгорніть фрагмент

— Іван Фретес
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.