在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

最好和推荐的解决方案是在你的控制器中使用$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

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

这将永远工作:

window.location.search美元

2015-07-11 13:08:57

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

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

总结一下。

如果你的应用是从外部链接加载的，那么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中读取查询参数最简洁的方法是什么?

推荐文章

最新文章

标签