การรับค่าจากสตริงการสืบค้นใน url โดยใช้ AngularJS $ location

Question 1

เกี่ยวกับ $ location.search เอกสารกล่าวว่า

ส่งคืนส่วนการค้นหา (เป็นวัตถุ) ของ url ปัจจุบันเมื่อเรียกโดยไม่มีพารามิเตอร์ใด ๆ

ใน URL ของฉันสตริงการสืบค้นของฉันมีพารามิเตอร์ '? test_user_bLzgB' โดยไม่มีค่า '$ location.search ()' ยังส่งคืนวัตถุ ฉันจะรับข้อความจริงได้อย่างไร

Question 2

ไม่แน่ใจว่ามีการเปลี่ยนแปลงหรือไม่ตั้งแต่ยอมรับคำตอบ แต่เป็นไปได้

$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

Question 3

หากคุณต้องการดูสตริงการสืบค้นเป็นข้อความคุณสามารถใช้: $window.location.search

Question 4

$location.search()ส่งคืนอ็อบเจ็กต์ซึ่งประกอบด้วยคีย์เป็นตัวแปรและค่าเป็นค่าของมัน ดังนั้น: ถ้าคุณเขียนสตริงการสืบค้นของคุณเช่นนี้:

?user=test_user_bLzgB

คุณสามารถรับข้อความดังนี้:

$location.search().user

หากคุณไม่ต้องการใช้คีย์ค่าเช่น? foo = bar ฉันขอแนะนำให้ใช้แฮช #test_user_bLzgB

และโทร

$location.hash()

จะส่งคืน 'test_user_bLzgB' ซึ่งเป็นข้อมูลที่คุณต้องการดึง

ข้อมูลเพิ่มเติม:

หากคุณใช้วิธีสตริงการสืบค้นและคุณได้รับวัตถุว่างด้วย $ location.search () อาจเป็นเพราะ Angular ใช้กลยุทธ์แฮชบังแทน html5 หนึ่ง ... เพื่อให้ทำงานได้ให้เพิ่มการกำหนดค่านี้ลงใน โมดูล

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

Question 5

ขั้นแรกทำให้รูปแบบ URL ถูกต้องเพื่อรับสตริงการสืบค้นโดยใช้#? q = stringที่เหมาะกับฉัน

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

ฉีด $ location service ลงในคอนโทรลเลอร์

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

ดังนั้นการใส่ออกควรเป็นabcd

Question 6

คุณสามารถใช้สิ่งนี้ได้เช่นกัน

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

Question 7

ถ้าคุณ $location.search()ใช้งานไม่ได้ให้ตรวจสอบว่าคุณมีสิ่งต่อไปนี้:

1) ได้html5Mode(true)รับการกำหนดค่าในการกำหนดค่าโมดูลของแอป

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

2) <base href="https://stackoverflow.com/">มีอยู่ใน HTML ของคุณ

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

อ้างอิง:

Question 8

Angular ไม่สนับสนุนสตริงการสืบค้นประเภทนี้

ส่วนการสืบค้นของ URL ควรเป็นไฟล์ &ลำดับที่แยกจากกันของคู่คีย์ - ค่าดังนั้นจึงสามารถตีความได้อย่างสมบูรณ์แบบว่าเป็นวัตถุ

ไม่มี API เลยที่จะจัดการสตริงการสืบค้นที่ไม่ได้แสดงถึงชุดของคู่คีย์ - ค่า

Question 9

ในตัวอย่าง NodeJS ของฉันฉันมี url "localhost: 8080 / Lists / list1.html? x1 = y" ที่ฉันต้องการสำรวจและรับค่า

ในการทำงานร่วมกับ $ location.search () เพื่อรับ x1 = y ฉันได้ทำบางสิ่ง

ซอร์สสคริปต์ไปยัง angular-route.js
ใส่ 'ngRoute' ลงในการอ้างอิงของโมดูลแอปของคุณ
กำหนดค่าตำแหน่งของคุณ
เพิ่มแท็กฐานสำหรับ $ location (ถ้าคุณไม่ค้นหาการค้นหาของคุณ () x1 จะไม่คืนค่าอะไรเลยหรือไม่ได้กำหนดหรือถ้าแท็กฐานมีข้อมูลที่ไม่ถูกต้องเบราว์เซอร์ของคุณจะไม่สามารถค้นหาไฟล์ของคุณใน script src ที่ .html ของคุณต้องการเปิดแหล่งมุมมองของหน้าเสมอเพื่อทดสอบตำแหน่งไฟล์ของคุณ!)
เรียกใช้บริการตำแหน่ง (ค้นหา ())

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

Question 10

การแก้ไขของฉันง่ายกว่าสร้างโรงงานและใช้เป็นตัวแปรเดียว ตัวอย่างเช่น

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>

ขยายข้อมูลโค้ด