directivas - ¿Cuál es la forma más concisa de leer los parámetros de consulta en AngularJS?
ng src angular (11)
$ location.search () funcionará solo con el modo HTML5 activado y solo en el navegador compatible.
Esto funcionará siempre:
$ window.location.search
Me gustaría leer los valores de los parámetros de consulta de URL usando AngularJS. Estoy accediendo al HTML con la siguiente URL:
http://127.0.0.1:8080/test.html?target=bob
Como era de esperar, location.search es "?target=bob" . Para acceder al valor de target , he encontrado varios ejemplos listados en la web, pero ninguno de ellos funciona en AngularJS 1.0.0rc10. En particular, todos los siguientes son undefined :
-
$location.search.target -
$location.search[''target''] -
$location.search()[''target'']
Alguien sabe lo que funcionará? (Estoy usando $location como un parámetro para mi controlador)
Actualizar:
He publicado una solución a continuación, pero no estoy del todo satisfecho con ella. La documentación en Guía del desarrollador: Servicios angulares: el uso de $ location indica lo siguiente sobre $location :
¿Cuándo debo usar $ location?
Cada vez que su aplicación necesite reaccionar a un cambio en la URL actual o si desea cambiar la URL actual en el navegador.
En mi caso, mi página se abrirá desde una página web externa con un parámetro de consulta, por lo que no estoy "reaccionando a un cambio en la URL actual" per se. Entonces, tal vez $location no sea la herramienta adecuada para el trabajo (para los detalles feos, vea mi respuesta a continuación). Por lo tanto, he cambiado el título de esta pregunta de "¿Cómo leer los parámetros de consulta en AngularJS usando $ location?" a "¿Cuál es la forma más concisa de leer los parámetros de consulta en AngularJS?". Obviamente, solo podría usar javascript y expresiones regulares para analizar la location.search búsqueda, pero ir a ese nivel bajo por algo tan básico realmente ofende la sensibilidad de mi programador.
Entonces: ¿hay una forma mejor de usar $location que la que utilizo en mi respuesta o hay una alternativa concisa?
Descubrí que para un SPA HTML5Mode causa muchos problemas de error 404, y no es necesario hacer que $ location.search funcione en este caso. En mi caso, quiero capturar un parámetro de cadena de consulta de URL cuando un usuario llega a mi sitio, independientemente de a qué "página" se vinculen inicialmente, Y pueda enviarlos a esa página una vez que inicien sesión. Así que solo capturo todos esas cosas en app.run
$rootScope.$on(''$stateChangeStart'', function (e, toState, toParams, fromState, fromParams) {
if (fromState.name === "") {
e.preventDefault();
$rootScope.initialPage = toState.name;
$rootScope.initialParams = toParams;
return;
}
if ($location.search().hasOwnProperty(''role'')) {
$rootScope.roleParameter = $location.search()[''role''];
}
...
}
luego, después de iniciar sesión, puedo decir $ state.go ($ rootScope.initialPage, $ rootScope.initialParams)
Es bueno que hayas conseguido que funcione con el modo html5, pero también es posible que funcione en modo hashbang.
Usted podría simplemente utilizar:
$location.search().target
para acceder al parámetro de búsqueda ''target''.
Para la referencia, aquí está el jsFiddle de trabajo: 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/>
<button ng-click="changeTarget(''Pawel'')">target=Pawel</button>
</div>
Es un poco tarde, pero creo que tu problema fue tu URL. Si en lugar de
http://127.0.0.1:8080/test.html?target=bob
tu tenias
http://127.0.0.1:8080/test.html#/?target=bob
Estoy bastante seguro de que habría funcionado. Angular es realmente exigente por su # /
Para dar una respuesta parcial a mi propia pregunta, aquí hay una muestra de trabajo para los navegadores HTML5:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<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>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
La clave fue llamar a $locationProvider.html5Mode(true); como se hizo anteriormente. Ahora funciona cuando se abre http://127.0.0.1:8080/test.html?target=bob . No estoy contento con el hecho de que no funcionará en navegadores antiguos, pero podría usar este enfoque de todos modos.
Una alternativa que funcionaría con navegadores más antiguos sería eliminar la html5mode(true) y usar la siguiente dirección con hash + barra diagonal:
http://127.0.0.1:8080/test.html#/?target=bob
La documentación relevante se encuentra en la Guía del desarrollador: Servicios angulares: Uso de $ location (es extraño que mi búsqueda de Google no haya encontrado esto ...).
Puede inyectar $routeParams (requiere ngRoute ) en su controlador. Aquí hay un ejemplo de la documentación:
// 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''}
EDITAR: También puede obtener y establecer parámetros de consulta con el servicio $location (disponible en ng ), particularmente su método de search : $location.search() .
$ routeParams son menos útiles después de la carga inicial del controlador; $location.search() puede ser llamado en cualquier momento.
Sólo para veranear.
Si su aplicación se está cargando desde enlaces externos, entonces Angular no detectará esto como un cambio de URL, por lo que $ loaction.search () le dará un objeto vacío. Para resolver esto, debe configurar lo siguiente en la configuración de su aplicación (app.js)
.config([''$routeProvider'', ''$locationProvider'', function ($routeProvider, $locationProvider)
{
$routeProvider
.when(''/'', {
templateUrl: ''views/main.html'',
controller: ''MainCtrl''
})
.otherwise({
redirectTo: ''/''
});
$locationProvider.html5Mode(true);
}]);
Se puede hacer de dos maneras:
- Usando
$routeParams
La mejor y más recomendada solución es usar $routeParams en su controlador. Requiere el módulo ngRoute para ser instalado.
function MyController($scope, $routeParams) {
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
// $routeParams ==> {chapterId:''1'', sectionId:''2'', search:''moby''}
var search = $routeParams.search;
}
- Utilizando
$location.search().
Hay una advertencia aquí. Sólo funcionará con el modo HTML5. De forma predeterminada, no funciona para la URL que no tiene hash ( # ) en ella http://localhost/test?param1=abc¶m2=def
Puedes hacerlo funcionar agregando #/ en la URL. http://localhost/test#/?param1=abc¶m2=def
$location.search() para devolver un objeto como:
{
param1: ''abc'',
param2: ''def''
}
Solo una precisión a la respuesta de Ellis Whitehead. $locationProvider.html5Mode(true); no funcionará con la nueva versión de angularjs sin especificar la URL base para la aplicación con una etiqueta <base href=""> o establecer el parámetro requireBase en false
Si configura $ location para usar html5Mode (history.pushState), debe especificar la URL base para la aplicación con una etiqueta o configurar $ locationProvider para que no requiera una etiqueta base al pasar un objeto de definición con requireBase: false a $ locationProvider. html5Mode ():
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
También puede usar $ location. $$ search.yourparameter
esto puede ayudarte
¿Cuál es la forma más concisa de leer los parámetros de consulta en AngularJS?
// 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''}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<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>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
($location.search()).target