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

Question

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

基本上,我会有这样的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;

---

有没有"有角度"或更好的方法来做这个而不是评估/解析网址,然后只是循环并将其转储到范围内？这似乎是一种非常"hacky"的方式.

---

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

Answer 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

Answer 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);

希望能帮助到你