web-dev-qa-db-fra.com

Comment générer des liens d'ancrage encodés avec URL avec AngularJS?

<a href="#/search?query={{address}}" ng-repeat="address in addresses">
  {{address}}
</a>

génère des liens qui ne sont pas encodés en URL si je comprends bien. Quelle est la bonne façon d'encoder #/search?query={{address}}?

Exemple d'adresse est 1260 6th Ave, New York, NY.

angularjsanchorurlencode
73
randomguy

Vous pouvez utiliser le encodeURIComponent natif en javascript. Vous pouvez également en faire un filtre de chaîne pour l'utiliser.

Voici l'exemple de la création du filtre escape.

js:

var app = angular.module('app', []);
app.filter('escape', function() {
  return window.encodeURIComponent;
});

html:

<a ng-href="#/search?query={{address | escape}}">

(mis à jour: adaptation à la réponse de Karlies qui utilise ng-href au lieu de plain href)

104
Tosh

@ La solution de Tosh retournera #/search?query=undefined si address n’est pas défini dans

<a ng-href="#/search?query={{address | escape}}">

Si vous préférez obtenir une chaîne vide à la place de votre requête, vous devez étendre la solution à

var app = angular.module('app', []);
app.filter('escape', function() {
    return function(input) {
        if(input) {
            return window.encodeURIComponent(input); 
        }
        return "";
    }
});

Cela retournera #/search?query= si address n'est pas défini.

21
asmaier

Vous pouvez utiliser le filtre encodeUri: https://github.com/rubenv/angular-encode-uri

  1. Ajoutez angular-encode-uri à votre projet:

    bower install --save angular-encode-uri

  2. Ajoutez-le à votre fichier HTML:

    <script src="bower_components/angular-encode-uri/dist/angular-encode-uri.min.js"></script>

  3. Référencez-le comme une dépendance pour votre module d'application:

    angular.module('myApp', ['rt.encodeuri']);

  4. Utilisez-le dans vos vues:

    <a href="#/search?query={{address|encodeUri}}">

14
Ruben Vermeersch

La réponse de Tosh a exactement l'idée du filtre. Je recommande de le faire juste comme ça. Cependant, si vous faites cela, vous devriez utiliser "ng-href" plutôt que "href", car suivre le "href" avant la résolution de la liaison peut entraîner un mauvais lien.

filtre:

'use strict';

angular.module('myapp.filters.urlEncode', [])

/*
 * Filter for encoding strings for use in URL query strings
 */
.filter('urlEncode', [function() {
  return window.encodeURIComponent;
}]);

vue:

<a ng-href="#/search?query={{ address | urlEncode }}" ng-repeat="address in addresses">
  {{address}}
</a>
12
Karlie Verkest De Young

ceci est un exemple de code de travail:

app.filter('urlencode', function() {
  return function(input) {
    return window.encodeURIComponent(input);
  }
});

Et dans le modèle:

<img ng-src="/image.php?url={{item.img_url|urlencode}}"
6
Jan Tchärmän