Mendapatkan nilai dari string kueri di url menggunakan AngularJS $ location

95

Mengenai $ location.search, itu dokumen tersebut mengatakan,

Kembalikan bagian pencarian (sebagai objek) dari url saat ini ketika dipanggil tanpa parameter apa pun.

Di url saya, string kueri saya memiliki param '? Test_user_bLzgB' tanpa nilai. Juga '$ location.search ()' mengembalikan sebuah objek. Bagaimana cara mendapatkan teks yang sebenarnya?

javascript angularjs Ian Warburton
sumber
Objek apa yang kamu dapatkan? Apakah Anda memiliki plunkr atau biola yang menunjukkan masalah yang Anda hadapi? Anda benar ketika Anda menggunakan $location.search()tetapi saya ingin memeriksa "objek" yang Anda dapatkan ketika Anda memanggilnya ...
callmekatootie
Saya tidak tahu benda apa itu. Saya mencoba menghitung properti tetapi tampaknya tidak ada.
Ian Warburton
Tidak yakin bagaimana melakukan biola yang memeriksa string kueri.
Ian Warburton

Jawaban:

152

Tidak yakin apakah itu telah berubah sejak jawaban yang diterima diterima, tetapi itu mungkin.

$location.search()akan mengembalikan objek pasangan nilai kunci, pasangan yang sama seperti string kueri. Kunci yang tidak memiliki nilai hanya disimpan di objek sebagai true. Dalam hal ini, objeknya adalah:

{"test_user_bLzgB": true}

Anda dapat mengakses nilai ini secara langsung dengan $location.search().test_user_bLzgB

Contoh (dengan string kueri yang lebih besar): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Catatan: Karena hashes (karena akan masuk ke http://fiddle.jshell.net/#/url , yang akan membuat biola baru), biola ini tidak akan berfungsi di browser yang tidak mendukung riwayat js (tidak akan berfungsi di IE <10)

Sunting:
Seperti yang ditunjukkan di komentar oleh @Naresh dan @DavidTchepak, $locationProviderjuga perlu dikonfigurasi dengan benar: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

TheSharpieOne
sumber
3
Seperti yang Naresh sebutkan, $locationProviderjuga perlu dikonfigurasi dengan benar: code.angularjs.org/1.2.23/docs/guide/… (Ini membuat saya tersandung. Semoga tautan ini menghemat waktu orang lain.)
David Tchepak
2
Untuk mengkonfigurasi penyedia lokasi, Anda memerlukan: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true] Anda juga memerlukan tag dasar di file HTML: <base href = "/">
Amin Ariana
Terima kasih atas inspirasi dan tip berguna, bagikan saja kasus saya. Saya membuat konstanta yang disebut userConfig dan memasukkan semuanya ke dalamnya, beberapa pengaturan dapat diganti dengan string kueri untuk fleksibilitas pengguna. Saya menggunakan ini dan meletakkan kueri dalam variabel cakupan globalController yang ada dalam tag HTML sehingga setiap pengontrol anak dapat mengambil parameter termasuk layanan. Karena userConfig juga dimasukkan ke dalam Service. Jadi secara virtual, mereka bisa berinteraksi bersama.
simongcc
Saya merasa lebih mudah untuk hanya menggunakan fungsi js, $ location.search () memiliki banyak bagian yang bergerak. Ada banyak contoh kode di luar sana untuk mendapatkan parameter string kueri.
nuander
@TheSharpieOne jika Anda punya waktu, bisakah Anda melihat pertanyaan ini? stackoverflow.com/questions/43121888/…
Leon Gaban
48

Jika Anda hanya perlu melihat string kueri sebagai teks, Anda dapat menggunakan: $window.location.search

andersh
sumber
11
Bagaimana ini bukan jawaban? Mungkin itu adalah singkat sedikit, tetapi tidak tampak untuk menjawab pertanyaan.
Léo Lam
Jika Anda memeriksa stempel waktu, jawabannya diedit 2 jam setelah komentar Dan. Ini benar-benar tidak terlalu penting, tetapi saya merasa terkejut bahwa komentar Leo mendapat suara positif jadi saya pikir saya akan menunjukkannya.
Bill Tarbell
40

$location.search()mengembalikan sebuah objek, terdiri dari kunci sebagai variabel dan nilai sebagai nilainya. Jadi: jika Anda menulis string kueri Anda seperti ini:

?user=test_user_bLzgB

Anda bisa dengan mudah mendapatkan teks seperti ini:

$location.search().user

Jika Anda tidak ingin menggunakan kunci, nilai seperti? Foo = bar, saya sarankan menggunakan hash #test_user_bLzgB,

dan menelepon 

$location.hash()

akan mengembalikan 'test_user_bLzgB' yang merupakan data yang ingin Anda ambil.

Informasi tambahan:

Jika Anda menggunakan metode string kueri dan Anda mendapatkan objek kosong dengan $ location.search (), itu mungkin karena Angular menggunakan strategi hashbang daripada html5 ... Untuk membuatnya berfungsi, tambahkan konfigurasi ini ke modul 

yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);
alejandrociatti.dll
sumber
13

Pertama buat format URL benar untuk mendapatkan string kueri, gunakan #? Q = string yang cocok untuk saya

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

Masukkan $ location service ke pengontrol

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

Jadi keluarannya harus abcd

MasoodUrRehman
sumber
10

kamu bisa menggunakan ini juga

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');
Rolwin Crasta
sumber
3
Anda telah menyalin fungsi itu dari jawaban SOF lain ... paling baik untuk mereferensikan sumber Anda.
arcseldon
Ya, ini yang saya gunakan, dapatkan dari suatu tempat di SO
nuander
10

Jika Anda $location.search()tidak berfungsi, pastikan Anda memiliki yang berikut:

1) html5Mode(true)dikonfigurasi dalam konfigurasi modul aplikasi

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

2) <base href="https://stackoverflow.com/">ada di HTML Anda

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

Referensi:

  1. dasar href = "/"
  2. html5Mode
Mahesh
sumber
"html5Mode (true) dikonfigurasi dalam konfigurasi modul aplikasi" - jelaskan
15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett - Maaf, maksud saya ini dikonfigurasi dalam metode konfigurasi objek aplikasi sudut. Misalnya ini dia: var appModule = angular.module ('myAppModule', []);
Mahesh
Terima kasih, saya cukup baru
mengenal
Ya, itu penting, menghadapi masalah yang sama
Bahadir Tasdemir
7

Angular tidak mendukung jenis string kueri ini.

Bagian kueri dari URL seharusnya merupakan &urutan pasangan kunci-nilai yang terpisah, sehingga dapat ditafsirkan dengan sempurna sebagai objek.

Tidak ada API sama sekali untuk mengelola string kueri yang tidak mewakili kumpulan pasangan kunci-nilai.

ditulis ulang
sumber
0

Dalam contoh NodeJS saya, saya memiliki url "localhost: 8080 / List / list1.html? X1 = y" yang ingin saya lintasi dan dapatkan nilai.

Untuk bekerja dengan $ location.search () untuk mendapatkan x1 = y, saya telah melakukan beberapa hal

  1. sumber skrip ke angular-route.js
  2. Masukkan 'ngRoute' ke dalam dependensi modul aplikasi Anda
  3. Konfigurasi locationProvider Anda
  4. Tambahkan tag dasar untuk $ location (jika tidak, pencarian Anda (). X1 tidak akan menghasilkan apa-apa atau tidak ditentukan. Atau jika tag dasar memiliki info yang salah, browser Anda tidak akan dapat menemukan file Anda di dalam script src yang kebutuhan .html Anda. Selalu buka sumber tampilan halaman untuk menguji lokasi file Anda!)
  5. panggil layanan lokasi (search ())

list1.js saya punya

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

dan list1.html saya punya

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

Panduan: https://code.angularjs.org/1.2.23/docs/guide/$location

Daun Jenna
sumber
0

Perbaikan saya lebih sederhana, buat pabrik, dan terapkan sebagai satu variabel. Sebagai contoh

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

Ivan Fretes
sumber