Получить все переменные области из параметров запроса

Как гласит название, я хочу, чтобы захватить все переменные из 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;

Есть ли "angular" или лучший способ сделать это, а не анализировать/анализировать URL-адрес, а затем просто зацикливать и сбрасывать его в область видимости? Это кажется очень "взломанным" способом.

Если это недостаточно ясно, я с удовольствием предоставит больше разъяснений

Ответы

Ответ 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", поэтому вам может понадобиться дополнительная логика для их обработки, если вы хотите иметь значения Boolean. Может быть, что-то вроде этого

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

Ответ 2

Есть несколько способов сделать это:

# 1 Использование $StateParams

Если вы используете URLRouting 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);

Надеюсь, что это поможет

Ответ 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

Ответ 4

url.js может быть вам полезен. Пример:

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