從查詢參數中獲取所有范圍變量

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

希望能幫助到你

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"