วิธีรับพารามิเตอร์ url โดยใช้ AngularJS

ซอร์สโค้ด HTML

<div ng-app="">
    <div ng-controller="test">
      <div ng-address-bar browser="html5"></div>
      <br><br>
      $location.url() = {{$location.url()}}<br>
      $location.search() = {{$location.search('keyword')}}<br>
      $location.hash() = {{$location.hash()}}<br>     
      keyword valus is={{loc}} and ={{loc1}}
  </div>
</div>

รหัสแหล่ง AngularJS

<script>
function test($scope, $location) {
  $scope.$location = $location;
  $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u');
  $scope.loc1 = $scope.$location.search().keyword ;    
    if($location.url().indexOf('keyword') > -1){    
        $scope.loc= $location.url().split('=')[1];
        $scope.loc = $scope.loc.split("#")[0]        
    }
  }
 </script>

นี่คือตัวแปรlocและการทดสอบloc1ทั้งสองคืนซึ่งเป็นผลลัพธ์ของ URL ด้านบน นี้เป็นวิธีที่ถูกต้องหรือไม่?

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันใช้เวลาพอสมควรในการแยกแยะออกจากเอกสารเชิงมุมที่กระจัดกระจาย RouteProviderและrouteParamsเป็นวิธีที่จะไป เส้นทางจะโยง URL เข้ากับคอนโทรลเลอร์ / มุมมองของคุณและสามารถส่งเส้นทางเส้นทางไปยังคอนโทรลเลอร์ได้

ตรวจสอบโครงการเมล็ดพันธุ์เชิงมุม ภายใน app.js คุณจะพบตัวอย่างสำหรับผู้ให้บริการเส้นทาง หากต้องการใช้พารามิเตอร์เพียงต่อท้ายพวกเขาเช่นนี้:

$routeProvider.when('/view1/:param1/:param2', {
    templateUrl: 'partials/partial1.html',    
    controller: 'MyCtrl1'
});

จากนั้นในตัวควบคุมของคุณฉีด $ routeParams:

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
  var param1 = $routeParams.param1;
  var param2 = $routeParams.param2;
  ...
}]);

ด้วยวิธีนี้คุณสามารถใช้พารามิเตอร์ที่มี URL เช่น: " http://www.example.com/view1/param1/param2 "

ในขณะที่การกำหนดเส้นทางเป็นวิธีแก้ปัญหาที่ดีสำหรับการแยกวิเคราะห์ URL ในระดับแอปพลิเคชันคุณอาจต้องการใช้$locationบริการระดับต่ำมากขึ้นเนื่องจากถูกฉีดเข้าไปในบริการหรือตัวควบคุมของคุณเอง:

var paramValue = $location.search().myParam; 

ไวยากรณ์อย่างง่ายนี้จะใช้งานhttp://example.com/path?myParam=paramValueได้ อย่างไรก็ตามเฉพาะเมื่อคุณกำหนดค่า$locationProviderในโหมด HTML 5 ก่อน:

$locationProvider.html5Mode(true);

มิฉะนั้นดูที่http://example.com/#!/path?myParam=someValueไวยากรณ์ "Hashbang" ซึ่งซับซ้อนกว่าเล็กน้อย แต่มีประโยชน์ในการทำงานกับเบราว์เซอร์เก่า (รองรับ HTML 5 ที่ไม่ใช่ HTML) ดี.

หากคุณใช้ ngRoute คุณสามารถฉีด$routeParamsเข้าไปในคอนโทรลเลอร์ของคุณได้

http://docs.angularjs.org/api/ngRoute/service/$routeParams

หากคุณใช้ angular-ui-router คุณสามารถฉีดได้ $stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing

ฉันพบวิธีแก้ปัญหาวิธีใช้ $ location.search () เพื่อรับพารามิเตอร์จาก URL

ก่อนอื่นใน URL คุณต้องใส่ไวยากรณ์ "#" ก่อนพารามิเตอร์เช่นนี้

"http://www.example.com/page#?key=value"

จากนั้นในคอนโทรลเลอร์คุณใส่ $ location ในฟังก์ชั่นและใช้ $ location.search () เพื่อรับพารามิเตอร์ URL

.controller('yourController', ['$scope', function($scope, $location) {

     var param1 = $location.search().param1; //Get parameter from URL

}]);

หากคำตอบที่โพสต์แล้วไม่ช่วยคุณสามารถลองใช้ $ location.search () myParam; ด้วย URL http: //example.domain#? myParam = paramValue

function GetURLParameter(parameter) {
        var url;
        var search;
        var parsed;
        var count;
        var loop;
        var searchPhrase;
        url = window.location.href;
        search = url.indexOf("?");
        if (search < 0) {
            return "";
        }
        searchPhrase = parameter + "=";
        parsed = url.substr(search+1).split("&");
        count = parsed.length;
        for(loop=0;loop<count;loop++) {
            if (parsed[loop].substr(0,searchPhrase.length)==searchPhrase) {
                return decodeURI(parsed[loop].substr(searchPhrase.length));
            }
        }
        return "";
    }

วิธีที่ง่ายและสะดวกในการรับค่า URL

First add # to url (e:g -  test.html#key=value)

url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)

var url = window.location.href 

(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")

url.split('=').pop()
output "stackoverflow"

เมื่อใช้ angularjs กับ express

ในตัวอย่างของฉันฉันใช้ angularjs กับ express ในการกำหนดเส้นทางดังนั้นการใช้ $ routeParams จะทำให้ยุ่งกับการกำหนดเส้นทางของฉัน ฉันใช้รหัสต่อไปนี้เพื่อรับสิ่งที่ฉันคาดหวัง:

const getParameters = (temp, path) => {
  const parameters = {};
  const tempParts = temp.split('/');
  const pathParts = path.split('/');
  for (let i = 0; i < tempParts.length; i++) {
    const element = tempParts[i];
    if(element.startsWith(':')) {
      const key = element.substring(1,element.length);
      parameters[key] = pathParts[i];
    }
  }
  return parameters;
};

สิ่งนี้ได้รับเทมเพลต URL และเส้นทางของสถานที่ที่กำหนด ฉันแค่เรียกมันว่า:

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $location.path()); 

การนำทุกอย่างมารวมกันในคอนโทรลเลอร์ของฉันคือ:

.controller('TestController', ['$scope', function($scope, $window) {
  const getParameters = (temp, path) => {
    const parameters = {};
    const tempParts = temp.split('/');
    const pathParts = path.split('/');
    for (let i = 0; i < tempParts.length; i++) {
      const element = tempParts[i];
      if(element.startsWith(':')) {
        const key = element.substring(1,element.length);
        parameters[key] = pathParts[i];
      }
    }
    return parameters;
  };

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);

ผลลัพธ์จะเป็น:

{ table: "users", id: "1", place_id: "43", interval: "week" }

หวังว่านี่จะช่วยให้ใครบางคนที่นั่น!