在AngularJS中读取查询参数最简洁的方法是什么?

我想使用AngularJS读取URL查询参数的值。我正在使用以下URL访问HTML:

http://127.0.0.1:8080/test.html?target=bob

不出所料，地点。搜索是"?target=bob"。关于访问target的值，我在网上找到了很多例子，但是在AngularJS 1.0.0rc10中都不行。特别地，下面这些都是未定义的:

location.search.target美元 $ location.search['目标'] $ location.search()(“目标”)

有人知道怎样做有效吗?(我使用$location作为参数到我的控制器)

更新:

我在下面发布了一个解决方案，但我并不完全满意。在开发者指南:Angular Services: Using $location中的文档中，关于$location声明如下:

什么时候我应该使用$location? 当您的应用程序需要对当前的变化做出反应时 URL或如果您想更改浏览器中的当前URL。

For my scenario, my page will be opened from an external webpage with a query parameter, so I'm not "reacting to a change in the current URL" per se. So maybe $location isn't the right tool for the job (for the ugly details, see my answer below). I've therefore changed the title of this question from "How to read query parameters in AngularJS using $location?" to "What's the most concise way to read query parameters in AngularJS?". Obviously I could just use javascript and regular expression to parse location.search, but going that low-level for something so basic really offends my programmer sensibilities.

那么:有没有比我的回答更好的使用$location的方法，或者有一个简洁的替代方法?

当前回答

埃利斯·怀特黑德的回答很精确。美元locationProvider.html5Mode(真正的);如果没有使用<base href="">标记或将参数requireBase设置为false，则在angularjs的新版本中不能正常工作

医生说:

如果你配置$location使用html5Mode(history.pushState)，你需要为应用程序指定一个带有标记的基URL，或者通过传递一个带有requireBase:false的定义对象给$locationProvider.html5Mode()来配置$locationProvider不需要基标记:

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

2016-02-11 12:44:37

其他回答

有两种方法:

使用$ routeParams

最好和推荐的解决方案是在你的控制器中使用$routeParams。需要安装ngRoute模块。

   function MyController($scope, $routeParams) {
      // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
      // Route: /Chapter/:chapterId/Section/:sectionId
      // $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
      var search = $routeParams.search;
  }

使用$ location.search()。

这里有一个警告。它只适用于HTML5模式。默认情况下，它不适用于没有哈希(#)的URL http://localhost/test?param1=abc&param2=def

你可以通过在URL中添加#/来实现。http://localhost/test#/?param1=abc&param2=def

$location.search()返回如下对象:

{
  param1: 'abc',
  param2: 'def'
}

2015-07-21 18:40:49

总结一下。

如果你的应用是从外部链接加载的，那么angular不会将其检测为URL更改，因此$loaction.search()会给你一个空对象。要解决这个问题，你需要在应用程序配置中设置以下参数(app.js)

.config(['$routeProvider', '$locationProvider', function ($routeProvider,     $locationProvider) 
{
   $routeProvider
      .when('/', {
         templateUrl: 'views/main.html',
         controller: 'MainCtrl'
      })
      .otherwise({
         redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
 }]);

2014-04-19 18:45:26

有点晚了，但我觉得你的问题是你的网址。如果不是

http://127.0.0.1:8080/test.html?target=bob

你有

http://127.0.0.1:8080/test.html#/?target=bob

我很确定那会有用的。Angular对它的#/非常挑剔

2016-03-10 16:49:00

你可以在你的控制器中注入$routeParams (require ngRoute)。下面是文档中的一个例子:

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}

编辑:您还可以使用$location服务(在ng中可用)获取和设置查询参数，特别是它的搜索方法:$location.search()。

$routeParams在控制器初始加载后就不那么有用了;$location.search()可以在任何时候调用。

2012-06-16 14:57:17

为了部分回答我自己的问题，这里有一个HTML5浏览器的工作示例:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>
</head>
<body ng-controller="QueryCntl">

Target: {{target}}<br/>

</body>
</html>

关键是调用$locationProvider.html5Mode(true);如上所述。它现在工作时打开http://127.0.0.1:8080/test.html?target=bob。我对它不能在旧的浏览器中工作感到不高兴，但无论如何我都可能使用这种方法。

一种适用于旧浏览器的替代方法是放弃html5mode(true)调用，而是使用以下地址与散列+斜杠代替:

http://127.0.0.1:8080/test.html#/?target=bob

相关文档在开发者指南:Angular Services: Using $location(奇怪的是我的谷歌搜索没有找到这个…)

2012-06-17 06:37:15

在AngularJS中读取查询参数最简洁的方法是什么?

推荐文章

最新文章

标签