【问题标题】：Get all scope variables from query parameters从查询参数中获取所有范围变量
【发布时间】：2015-11-08 20:53:50
【问题描述】：

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

基本上，我会有这样的网址（格式可能会更改）

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

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

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

本质上，我想要做的是抓住这部分：opt.val=true&eg=foobar 并将控制器变量设置为这些值，因此我最终将变量设置为：

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

是否有“角度”或更好的方法来执行此操作，而不是评估/解析 url，然后只是循环并将其转储到范围内？这似乎是一种非常“hacky”的方式。

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

【问题讨论】：

标签： javascript angularjs url angularjs-scope

【解决方案1】：

好的，对于初学者，您可以简单地使用$location 服务获取值

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

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

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

请记住，$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 演示~http://plnkr.co/edit/xOnDdWUW8PgsMFgmXr0r?p=preview

【讨论】：

你真的需要$parse 的那一行，还是$scope[key] = val; 就够了？
@TMG 将设置$scope['opt.val']，而不是$scope.opt.val
我非常想要很酷的解决方案，但是是否有一种“角度”的方式来从 $scope 变量生成查询参数，或者我应该只是循环和加入
@Vɪʜᴀɴ 我不确定你的意思，但你可以使用$location.search() 作为二传手。见docs.angularjs.org/api/ng/service/$location#search
@Phil 当我使用 $location.search 设置查询参数时，它会在 $eval 尝试解析它时引发错误。这可能是因为它没有引号吗？

【解决方案2】：

有一些方法可以做到这一点：

#1 使用 $StateParams

如果您使用 URLRouting of angular，您可以使用 $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"});
    }
})

这定义了您的路由联系人接收 myParam 和 myParam2。之后，您可以使用 $stateParamsService 在控制器中轻松解析此参数：

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

#2 使用 $location

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

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

但是需要先开启html5mode，才会生效

$locationProvider.html5Mode(true);

希望对你有帮助

【讨论】：

你不需要HTML5模式来使用$location.search()

【解决方案3】：

Angular 方式。只需在控制器中注入 $routeParams 即可。

见下例

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

在此处查看更多详细信息$routeParams

【讨论】：

这不是 "Angular 方式"，而是 "ngRoute 方式"

【解决方案4】：

url.js 可能对你有用。示例：

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

【讨论】：