Ce qui est le plus concis façon de lire les paramètres de la requête dans AngularJS?

Question

Ce qui est le plus concis façon de lire les paramètres de la requête dans AngularJS?

Demandé el 16 de Juin, 2012: Quand la question a-t-elle été
77198 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Je voudrais lire les valeurs des paramètres de requête URL en utilisant AngularJS. Je suis accès à de l'HTML avec l'URL suivante:

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

Comme prévu, location.search est "?target=bob". Pour accéder à la valeur de la cible, j'ai trouvé plusieurs exemples énumérés sur le web, mais aucun d'entre eux travaillent dans AngularJS 1.0.0rc10. En particulier, les éléments suivants sont tous undefined:

$location.search.target
$location.search['target']
$location.search()['target']

Quelqu'un sait ce que sera le travail? (Je suis à l'aide d' $location en tant que paramètre à mon contrôleur)

Mise à jour:

J'ai posté une solution ci-dessous, mais je ne suis pas entièrement satisfait. De la documentation au Guide du Développeur: Angulaire des Services: à l'Aide de $emplacement états suivants à propos de $location:

Quand dois-je utiliser $lieu?

Chaque fois que votre application a besoin de réagir à un changement dans le courant de URL ou si vous souhaitez modifier l'URL dans le navigateur.

Pour mon scénario, ma page sera ouverte à partir d'une page web externe avec un paramètre de requête, donc je ne suis pas "réagir à un changement dans l'URL en cours" à proprement parler. Donc peut - $location n'est pas le bon outil pour le travail (pour le vilain de détails, voir ma réponse ci-dessous). J'ai donc changé le titre de cette question de "Comment faire pour lire les paramètres de la requête en utilisant AngularJS $lieu?", "Quel est le plus concis façon de lire les paramètres de la requête dans AngularJS?". Évidemment, je pourrais juste l'utilisation de javascript et de l'expression régulière pour analyser location.search, tandis que le faible niveau de quelque chose d'aussi élémentaire vraiment choque mon programmeur sensibilités.

Donc: est-il une meilleure façon d'utiliser $location que je fais dans ma réponse, ou est-il un concis alternative?

Demandé el 16 de Juin, 2012 par Ellis Whitehead

Answer 1

5 Réponses

Answer 2

200voto

Andy Joslin Points 23231

Vous pouvez injecter $routeParams dans votre contrôleur. Voici un exemple tiré de la doc:

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

http://docs.angularjs.org/api/ngRoute.$routeParams

EDIT: Vous pouvez aussi obtenir et définir les paramètres de la requête avec $lieu.recherche (la) - depuis $routeParams sont de moins en moins utile après que le contrôleur de chargement initial.

Répondu el 16 de Juin, 2012 par Andy Joslin (23231 Points )

Answer 3

190voto

pkozlowski.opensource Points 52557

Bien que vous avez réussi à le faire fonctionner avec le mode html5, mais il est également possible de le faire travailler dans le hasbang mode.

Vous pouvez simplement utiliser:

($location.search()).target

pour obtenir l'accès à la "cible" de la recherche param.

Pour la référence, ici, c'est le travail jsFiddle: http://jsfiddle.net/PHnLb/7/

Répondu el 16 de Juillet, 2012 par pkozlowski.opensource (52557 Points )

Answer 4

57voto

Ellis Whitehead Points 1491

Pour donner un début de réponse à ma propre question, voici un exemple de travail pour les navigateurs 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 clé a été de $locationProvider.html5Mode(true); comme l'a fait ci-dessus. Il travaille maintenant lors de l'ouverture d' http://127.0.0.1:8080/test.html?target=bob. Je ne suis pas heureux sur le fait qu'il ne fonctionne pas dans les navigateurs plus anciens, mais je pourrais utiliser cette approche de toute façon.

Une alternative qui serait de travailler avec les anciens navigateurs, vous pourriez déposer l' html5mode(true) d'appels et d'utiliser l'adresse suivante avec de hachage+barre oblique à la place:

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

La documentation pertinente au Guide du Développeur: Angulaire des Services: à l'Aide de $emplacement (étrange que ma recherche google ne l'ai pas trouvé...).

Répondu el 17 de Juin, 2012 par Ellis Whitehead (1491 Points )

Answer 5

6voto

sapy Points 7

Juste pour résumer .

Si votre application est en cours de chargement à partir de liens externes puis angulaire habitude de le détecter comme un changement d'URL et donc $de lieu.recherche() vous donnera un objet vide . Pour résoudre ce problème, vous devez définir suivant dans votre application de config(app.js)

.config(['$routeProvider', '$locationProvider', function ($routeProvider,     $locationProvider) 
{
   $routeProvider
      .when('/', {
         templateUrl: 'views/main.html',
         controller: 'MainCtrl'
      })
      .otherwise({
         redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
 }]);

Répondu el 19 de Avril, 2014 par sapy (7 Points )

Answer 6

1voto

Bujdea Bogdan Points 73

vous pouvez également utiliser l'emplacement$.$$de recherche.yourparameter

Répondu el 5 de Août, 2013 par Bujdea Bogdan (73 Points )

Ce qui est le plus concis façon de lire les paramètres de la requête dans AngularJS?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Ce qui est le plus concis façon de lire les paramètres de la requête dans AngularJS?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: