如何使用AngularJS获取url参数


199

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>

此处,变量locloc1两者均返回测试,作为上述URL的结果。这是正确的方法吗?


1
您可能要签出$ routeParams
尼克·海纳

不太清楚你问什么在这里...的$ routeParams和$位置#方法的文档应该让你开始
甲板

7
拒绝投票时,请考虑添加评论,以便改善问题。谢谢。
praveenpds 2014年

Answers:


314

我知道这是一个老问题,但是鉴于稀疏的Angular文档,我花了一些时间来解决这个问题。该RouteProviderrouteParams是要走的路。路由将URL连接到您的Controller / View,并且routeParams可以传递到控制器中。

查看Angular种子项目。在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


2
请注意,此示例的最后一行});应为}]);
Andrew Lank 2013年

44
也可以/view/1/2?other=12使用 $routeParams.other
DavidC

我认为您在控制器中重复了“ var param1”。我无法编辑这种简单的更改。
汤姆(Tom)

角做起来很简单,而且你的答案是太好描述
穆罕默德Kermani

1
分配并发送示例:var param1 =“ abc”; $ location.path('/ view1 /:'+ param1); $ route.reload();
Robot70 '08 / 08/3

158

尽管路由确实是应用程序级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不兼容)进行操作。好。


16
似乎您必须将$ locationProvider.html5mode(true)添加为模块配置,如下所示:angular.module(“ myApp”,[])。config(function($ locationProvider){$ locationProvider.html5Mode(true);});
sq1020 2014年

4
并且html5Mode <base href="http://example.com/en/" />在您的中需要一个标记index.html
cespon 2015年

1
我喜欢您的解决方案的地方是,您甚至可以传递对象,然后将它们作为对象。
士兰2015年

2
也可以不添加<base>标记并像这样指定它:.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])
Guillaume

1
在Angular 1.5.8中,我无需进行配置$locationProvider即可工作。 http://example.com/path#?someKey=someVal,然后 $location.search().someKey // => 'someVal'
jiminikiz


11

我找到了解决方案如何使用$ location.search()从URL获取参数

首先在URL中,您需要在参数前加上语法“#”,例如本示例

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

然后在您的控制器中,将$ location放入函数中,并使用$ location.search()获取以下网址的网址参数

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

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

}]);

它对查询参数的工作以及@jeff的以下答案用于路径变量
Abdeali Chandanwala


1
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 "";
    }

0

简单而轻松的方法来获取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"

0

当将angularjs与express一起使用时

在我的示例中,我使用了angularjs进行快速路由,因此使用$ 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" }

希望这可以帮助某人!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.