在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的方法，或者有一个简洁的替代方法?

当前回答

$location.search()将只在HTML5模式开启和支持浏览器的情况下工作。

这将永远工作:

window.location.search美元

2015-07-11 13:08:57

其他回答

你可以在你的控制器中注入$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

埃利斯·怀特黑德的回答很精确。美元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

总结一下。

如果你的应用是从外部链接加载的，那么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

我发现对于一个SPA HTML5Mode会导致大量的404错误问题，并且没有必要使$location。在这种情况下搜索工作。在我的例子中，我想在用户访问我的网站时捕获一个URL查询字符串参数，而不管他们最初链接到哪个“页面”，并且能够在他们登录后将他们发送到该页面。我只需要在app。run中捕获这些东西

$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    if (fromState.name === "") {
        e.preventDefault();
        $rootScope.initialPage = toState.name;
        $rootScope.initialParams = toParams;
        return;
    }
    if ($location.search().hasOwnProperty('role')) {
        $rootScope.roleParameter = $location.search()['role'];
    }
    ...
}

然后在登录后我可以说 (state.go美元rootScope。initialPage rootScope.initialParams美元)

2018-01-11 00:51:35

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

推荐文章

最新文章

标签