如何使用AngularJS获取url参数

HTML source code

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

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>

Here the variables loc and loc1 both return test as the result for the above URL. Is this the correct way?

在这里，变量loc和loc1都返回测试作为上述URL的结果。这是正确的方法吗?

5 个解决方案

#1

297

I know this is an old question, but it took me some time to sort this out given the sparse Angular documentation. The RouteProvider and routeParams is the way to go. The route wires up the URL to your Controller/View and the routeParams can be passed into the controller.

我知道这是一个老问题，但我花了一些时间来整理这个问题，考虑到稀疏的角度文档。航线提供商和航线提供商是一条可行之路。路由将URL连接到您的控制器/视图，并可以将routeParams传递到控制器。

Check out the Angular seed project. Within the app.js you'll find an example for the route provider. To use params simply append them like this:

看看角种子项目。在app.js中，您将为路由提供程序找到一个示例。要使用params，只需如下所示:

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

Then in your controller inject $routeParams:

然后在控制器中注入$routeParams:

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

#2

144

While routing is indeed a good solution for application-level URL parsing, you may want to use the more low-level $location service, as injected in your own service or controller:

虽然路由确实是应用程序级URL解析的一个很好的解决方案，但是您可能希望使用更低级的$location服务，就像在您自己的服务或控制器中注入的那样:

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

This simple syntax will work for http://example.com/path?myParam=paramValue. However, only if you configured the $locationProvider in the HTML 5 mode before:

这个简单的语法将适用于http://example.com/path?但是，只有当您在HTML 5模式下配置$locationProvider时才会:

$locationProvider.html5Mode(true);

Otherwise have a look at the http://example.com/#!/path?myParam=someValue "Hashbang" syntax which is a bit more complicated, but have the benefit of working on old browsers (non-HTML 5 compatible) as well.

否则看看http://example.com/#!/path?myParam=someValue“Hashbang”语法有点复杂，但是也有使用旧浏览器(非html 5兼容)的好处。

#3

If you're using ngRoute, you can inject $routeParams into your controller

如果使用ngRoute，可以将$routeParams注入控制器

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

http://docs.angularjs.org/api/ngRoute/service/ routeParams美元

If you're using angular-ui-router, you can inject $stateParams

如果您正在使用angular-ui-router，您可以注入$stateParams

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

#4

If the answers already posted didn't help, one can try with $location.search().myParam; with URLs http://example.domain#?myParam=paramValue

如果已经发布的答案没有帮助，可以尝试$location.search().myParam;url http://example.domain ? myParam = paramValue

#5

I found solution how to use $location.search() to get parameter from URL

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

first in URL u need put syntax " # " before parameter like this example

首先，在URL u中，需要在像本例这样的参数之前添加语法“#”。

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

“http://www.example.com/page ?键=值”

and then in your controller u put $location in function and use $location.search() to get URL parameter for

然后在你的控制器中，你在函数中放入$location并使用$location。search()来获取URL参数。

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

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

}]);

#1

297