Definir parâmetros de consulta de URL sem alteração de estado usando o roteador de interface angular

Como devo atualizar a URL da barra de endereços com um parâmetro de consulta variável usando o roteador de interface do usuário do AngularJS para manter o estado ao atualizar a página?

Atualmente, estou usando $state.transitionTo('search', {q: 'updated search term'}) sempre que a input é alterada, mas o problema é que isso recarrega o controlador, redesenha a janela e perde qualquer foco de input de texto.

Existe uma maneira de atualizar stateParams e sincronizá-lo com o URL da janela?

Eu estava tendo problemas com .transitionTo até atualizar para o ui-router 0.2.14. 0.2.14 altera corretamente a barra de localização (sem recarregar o controlador) usando uma chamada como esta:

 $state.transitionTo('search', {q: 'updated search term'}, { notify: false }); 

edit: jogado ao redor com este mais alguns hoje, e percebi que o roteador ui angular tem uma opção semelhante ao routerProvider nativo: “reloadOnSearch”.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#options-1

Ele é definido como true por padrão, mas se você defini-lo como false em seu estado, a mudança de estado não ocorrerá quando os parâmetros da consulta forem alterados. Você pode então chamar $location.search(params); ou $location.search('param', value); e o URL irá mudar, mas o ui-router não irá reconstruir o controller / view inteiro. Você provavelmente também precisará ouvir o evento $locationChangeStart no escopo raiz para lidar com as ações do histórico de encaminhamento e encaminhamento no seu aplicativo, pois elas também não causarão alterações de estado.

Também estou ouvindo o evento $stateChangeSuccess no escopo do meu controlador para capturar a carga inicial da página / rota.

Há alguma discussão sobre o github para usar este recurso com mudanças de caminho (não apenas mudanças de URL): https://github.com/angular-ui/ui-router/issues/125, mas eu não testei nada disso desde a minha O caso de uso era específico para consultar parâmetros de string.

A versão anterior da minha resposta mencionou essa questão do github:

https://github.com/angular-ui/ui-router/issues/562

Mas isso é um problema ligeiramente separado, especificamente mostrando um modal de um estado sobre outro estado sem alterar o estado não-modal. Eu tentei o patch nesse problema, mas está claro que isso não serve para impedir que todo o estado seja recarregado na alteração de URL.

Atualização 19 de maio de 2015

A partir do ui-router 0.2.15, a questão de recarregar o estado em alterações de parâmetros de consulta foi resolvida. No entanto, a nova atualização quebrou os resources de back e forward da API de histórico com parâmetros de consulta. Eu não fui capaz de encontrar uma solução para isso.

Original

A resposta de Jay não funcionou para mim e nem uma tonelada de outras respostas. Tentar ouvir $locationChangeStart causou problemas ao tentar avançar e voltar no histórico do navegador, pois isso me faria executar o código duas vezes: uma vez quando o novo estado mudava e outro porque o $loationChangeStart triggersva.

Eu tentei usar reloadOnSearch=false , mas isso impediu alterações de estado mesmo quando o caminho do URL mudou. Então, finalmente consegui que funcionasse fazendo o seguinte:

Quando você alterar $location.search() para atualizar os parâmetros de consulta, use um “hack” para desativar temporariamente o recarregamento na pesquisa, definir parâmetros de consulta e reativar o recarregamento.

 $state.current.reloadOnSearch = false; $location.search('query', [1,2]); $timeout(function () { $state.current.reloadOnSearch = undefined; }); 

Isso garantirá que as alterações nos parâmetros de consulta não recarreguem o estado e que as alterações no caminho do URL recarreguem o estado corretamente.

No entanto, isso não gerou o histórico dos navegadores para alterar o estado (necessário para saber quando um parâmetro de consulta é alterado para reler o URL) quando um parâmetro de consulta fazia parte do URL. Então eu também tive que adicionar o nome de cada parâmetro de consulta à propriedade url do estado .

 $locationProvider.html5Mode(true); $stateProvider .state('home', { url: '/?param1&param2&param3', templateUrl: 'home.html', controller: 'homeCtrl as home', }); 

Quaisquer nomes de parâmetros na url são opcionais quando listados dessa maneira, mas quaisquer alterações nesses nomes de parâmetros recarregarão o estado ao pressionar os botões voltar e avançar no navegador.

Espero que outros achem isso útil e não demore vários dias para descobrir como fazê-lo (como eu fiz).

    Intereting Posts