从查询参数中获取所有范围变量

As the title says, what I want to do is grab all variables from the URL and place them in the scope variables.

正如标题所说，我要做的是从URL中获取所有的变量，并将它们放在范围变量中。

Essentially, I'll have a URL like this (format may be changed)

本质上，我将有一个这样的URL(格式可以更改)

http://example.com?opt.val=true&eg=foobar

I also have my controller code which looks something like:

我还有我的控制器代码看起来像:

m.controller('maps', function ($scope) {
    $scope.opts = {
        val: false,
        lav: false
    };
    $scope.eg = "Hello, World!";
});

---

Essentially, what I want to do is to grab this part: opt.val=true&eg=foobar and set the controller variables to those values so I'll end up with my variables as:

本质上，我想要做的是抓取这一部分:opt.val=true&eg=foobar，并将控制器变量设置为这些值，最后我的变量为:

$scope.opt.val = true;
$scope.eg      = "foobar";
$scope.lav     = false;

---

Is there an "angular" or better way to do this rather than evaling / parsing the url, then just looping and dumping it in the scope? This seems like a very "hacky" way.

是否有一种“有棱角的”或更好的方法来实现这一点，而不是发出/解析url，然后在范围内循环并转储它?这似乎是一种非常“庸俗”的方式。

---

If this isn't clear enough, I'll be happy to provide more clarification

如果这还不够清楚，我很乐意提供更多的说明。

4 个解决方案

#1

Ok, for starters, you can simply grab the values using the $location service

首先，您可以使用$location服务获取值

var search = $location.search();
// should look like
// {
//     "opt.val": "true",
//     "eg": "foobar"
// }

Next, you can use the $parse service to assign the values to your $scope

接下来，您可以使用$parse服务将值分配给您的$scope

angular.forEach(search, function(val, key) {
    $parse(key).assign($scope, val);
});

Keep in mind that every value in $location.search() is a string, including "true" and "false" so you may need some extra logic to handle those if you want Boolean values. Maybe something like this

请记住，$location.search()中的每个值都是一个字符串，包括“true”和“false”，因此如果需要布尔值，您可能需要一些额外的逻辑来处理这些值。也许是这样的

angular.forEach(search, function(val, key) {
    var evald = $scope.$eval(val);
    if (evald !== undefined) {
        val = evald;
    }
    $parse(key).assign($scope, val);
});

Plunker demo ~ http://plnkr.co/edit/xOnDdWUW8PgsMFgmXr0r?p=preview

恰好演示http://plnkr.co/edit/xOnDdWUW8PgsMFgmXr0r?p=preview ~

#2

There are some ways you can do that:

有一些方法可以做到:

#1 Using $StateParams

If you are using URLRouting of angular, you can use $stateParams which returns exactly what you want. All you have to do, is define your parameters in your Router. Example:

如果您正在使用角的URLRouting，您可以使用$stateParams返回您想要的值。你所要做的就是在路由器中定义你的参数。例子:

$stateProvider
.state('contacts.detail', {
    url: "/contacts?myParam&myParam2",
    templateUrl: 'contacts.detail.html',
    controller: function ($stateParams) {
        // If we got here from a url of /contacts/42
        expect($stateParams).toBe({contactId: "42"});
    }
})

This defines your route contacts receiving myParam and myParam2. After this, you can use $stateParamsService to parse this parameters in your controller very easy:

这定义了接收myParam和parammy2的路由联系人。在此之后，可以使用$stateParamsService很容易地解析控制器中的参数:

controller: function($stateParams){
  $stateParams.myParam //*** Exists! ***//
 }

#2 Using $location

If you aren't using routes, and want more low-level service, you can inject $location in your controller and service, and parse the querys, eg:

如果您不使用路由，并且想要更低级的服务，您可以在控制器和服务中注入$location，并解析查询，例如:

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

But it is necessary to enable html5mode first, and it will work

但是，必须首先启用html5mode，并且它将工作。

$locationProvider.html5Mode(true);

Hope it helps

希望它能帮助

#3

Angular way would be. Just inject $routeParams in your controller.

角的方法。只需在控制器中注入$routeParams。

See example below

请参见下面的例子

// 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'}

See more details here $routeParams

更多细节见这里$ $routeParams

#4

url.js may be useful to you. Example:

url。js可能对你有用。例子:

url.parse("http://example.com?opt.val=true&eg=foobar").get.eg === "foobar"