Qual'é a forma mais concisa de ler os parâmetros de consulta no AngularJS?

I'gostaria de ler os valores dos parâmetros de consulta de URL usando AngularJS. I'm acessando o HTML com a seguinte URL:

13 de Janeiro de 2010

Como esperado, location.search é "?target=bob". Para acessar o valor de target, I'encontrei vários exemplos listados na web, mas nenhum deles funciona no AngularJS 1.0.0rc10. Em particular, os seguintes são todos `infinidos':

  • $localização.search.target
  • $location.search['target']
  • $location.search()['target']

Alguém sabe o que vai funcionar? (I'estou usando $location como parâmetro para o meu controlador)

Atualização:

I'postei uma solução abaixo, mas I'não estou totalmente satisfeito com ela. A documentação em Developer Guide: Angular Services: Using $location afirma o seguinte sobre `$location':

Quando devo usar $location?

Sempre que a sua aplicação precisar de reagir a uma alteração na URL ou se você quiser alterar o URL atual no navegador.

Para o meu cenário, a minha página será aberta a partir de uma página web externa com um parâmetro de consulta, portanto I'm não "reagindo a uma mudança na URL&quot atual; por si só. Então talvez $location seja't a ferramenta certa para o trabalho (para os detalhes feios, veja minha resposta abaixo). I'portanto mudou o título desta pergunta de "Como ler parâmetros de consulta em AngularJS usando $location?" para "Qual'é a maneira mais concisa de ler parâmetros de consulta em AngularJS?". Obviamente eu poderia apenas usar javascript e expressão regular para parse location.search, mas ir tão baixo nível para algo tão básico realmente ofende minha sensibilidade de programador.

Então: existe uma maneira melhor de utilizar $location do que eu na minha resposta, ou existe uma alternativa concisa?

Damjan Pavlica
Pergunta editada :em
Programação
angularjs ngroute
16º junho 2012 в 1:03
19 vistas

Você pode injetar $routeParams (requer ngRoute) em seu controlador. Aqui's um exemplo do docs:

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

EDIT: Você também pode obter e definir parâmetros de consulta com o serviço $location (disponível em ng), particularmente seu método search: $location.search().

$routeParams são menos úteis após a carga inicial do controlador's; $location.search() pode ser chamado a qualquer momento.

KMJungersen
Resposta editada :em
Comentários (6)

Ainda bem que você'conseguiu pô-lo a funcionar com o modo html5 mas também é possível pô-lo a funcionar no modo hashbang.

Você poderia simplesmente usar:

$location.search().target

para obter acesso ao 'target' parâmetro de busca.

Para a referência, aqui está o jsFiddle em funcionamento: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $location) {

    $scope.location = $location;
    $scope.$watch('location.search()', function() {
        $scope.target = ($location.search()).target;
    }, true);

    $scope.changeTarget = function(name) {
        $location.search('target', name);
    }
}
<div ng-controller="MyCtrl">

    <a href="#!/test/?target=Bob">Bob</a>
    <a href="#!/test/?target=Paul">Paul</a>

    <hr/>    
    URL 'target' param getter: {{target}}<br>
    Full url: {{location.absUrl()}}
    <hr/>

    target=Pawel

</div>
JDB
Resposta editada :em
Comentários (12)

Para dar uma resposta parcial à minha própria pergunta, aqui está uma amostra de trabalho para os navegadores HTML5:




  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>



Target: {{target}}<br/>

A chave era chamar $locationProvider.html5Mode(true); como foi feito acima. Agora funciona ao abrir `http://127.0.0.1:8080/test.html?target=bob'. I'não estou feliz com o fato de que ele ganhou'não funciona em navegadores mais antigos, mas eu poderia usar esta abordagem de qualquer forma.

Uma alternativa que funcionaria com navegadores mais antigos seria abandonar a chamada html5mode(true) e utilizar o seguinte endereço com hash+slash em seu lugar:

http://127.0.0.1:8080/test.html#/?target=bob

A documentação relevante está em Developer Guide: Angular Services: Using $location (estranho que minha busca no google não't encontrei isto...).

martin
Resposta editada :em
Comentários (3)