＃1使用$ stateParams

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 demo〜http://plnkr.co/edit/xOnDdWUW8PgsMFgmXr0r?p=preview

Answer 2

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

＃1使用$ stateParams

如果你使用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"});
    }
})

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

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

＃2使用$ location

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

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

但是首先启用html5mode是必要的，它会起作用

$locationProvider.html5Mode(true);

希望有所帮助

Answer 3

角度方式。只需在控制器中注入$ 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

Answer 4

url.js可能对您有用。例如：

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

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

4 个答案:

＃1使用$ stateParams

＃2使用$ location