如何使用AngularJS获取url参数

IT技术 javascript angularjs routeparams
2021-01-16 21:27:35

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两者都返回test作为上述 URL 的结果。这是正确的方法吗？

6个回答

我知道这是一个老问题，但考虑到稀疏的 Angular 文档，我花了一些时间来解决这个问题。该RouteProvider和routeParams是要走的路。路由将 URL 连接到您的控制器/视图，并且可以将 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 ”

分配和发送示例：var param1 = "abc"; $location.path('/view1/:' + param1);$route.reload();
2021-03-17 21:27:35
注意这个例子的最后一行});应该是}]);
2021-03-19 21:27:35
Angular 使它变得如此简单，而且您的答案也非常具有描述性
2021-03-24 21:27:35
我认为您的控制器中重复了“var param1”。我无法编辑这么简单的更改。
2021-03-25 21:27:35
还可以在查询字符串形式得到其他任意PARAMS/view/1/2?other=12与 $routeParams.other
2021-04-09 21:27:35

虽然路由确实是应用程序级 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 兼容）上工作的好处好。

似乎您必须将 $locationProvider.html5mode(true) 添加为module配置，如下所示：angular.module("myApp", [])。config(function($locationProvider) { $locationProvider.html5Mode(true); });
2021-03-17 21:27:35
我喜欢您的解决方案的一点是您甚至可以传递对象，并将它们作为对象获取。
2021-03-26 21:27:35
也可以不添加 <base> 标签并像这样指定它： .config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])
2021-03-29 21:27:35
在 Angular 1.5.8 中，我无需进行配置$locationProvider即可使其正常工作。 http://example.com/path#?someKey=someVal， 然后 $location.search().someKey // => 'someVal'
2021-04-01 21:27:35
并且 html5Mode 需要<base href="http://example.com/en/" />在您的index.html.
2021-04-05 21:27:35

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

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

如果您使用的是 angular-ui-router，则可以注入 $stateParams

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

为了$stateParams显示查询参数，我必须在定义状态时指定它们，如github.com/angular-ui/ui-router/wiki/...
2021-03-17 21:27:35

我找到了如何使用 $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

}]);
它适用于查询参数，@jeff 的以下答案适用于路径变量
2021-03-20 21:27:35

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

这是这里投票第二高的解决方案......并且在这个解决方案之前 3 年发布...... stackoverflow.com/a/19481865/3578036
2021-03-19 21:27:35
其它你可能感兴趣的问题
上一篇React组件从props初始化状​​态 下一篇从数组中删除最后一项