example - ¿Cómo generar vínculos de anclaje codificados en url con AngularJS?

href in angular 5

Question

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

genera enlaces que no están codificados en URL si entiendo correctamente. ¿Cuál es la forma correcta de codificar #/search?query={{address}} ?

La dirección del ejemplo es 1260 6th Ave, New York, NY .

Answer 1

La respuesta de Tosh tiene la idea de filtro exactamente correcta. Recomiendo hacerlo así. Sin embargo, si haces esto, deberías usar "ng-href" en lugar de "href" , ya que seguir el "href" antes de que el enlace se resuelva puede dar como resultado un enlace incorrecto.

filtrar:

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

ver:

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

Answer 2

La solución de @ Tosh devolverá #/search?query=undefined si la address no está definida en

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

Si prefiere obtener una cadena vacía para su consulta, debe extender la solución a

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

Esto devolverá #/search?query= si la address no está definida.

Answer 3

Puede usar el encodeURIComponent nativo encodeURIComponent en javascript. Además, puede convertirlo en un filtro de cadena para utilizarlo.

Aquí está el ejemplo de hacer un filtro de escape .

js:

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

html:

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

(actualizado: adaptándose a la respuesta de Karlies que utiliza ng-href lugar de href simple)

Answer 4

Puede usar el filtro encodeUri: https://github.com/rubenv/angular-encode-uri

1. Añada angular-encode-uri a su proyecto:

   bower install --save angular-encode-uri

2. Agrégalo a tu archivo HTML:

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

3. Referenciarlo como una dependencia para su módulo de aplicación:

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

4. Úselo en sus puntos de vista:

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

Answer 5

este es un ejemplo de código de trabajo:

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

Y en la plantilla:

<img ng-src="/image.php?url={{item.img_url|urlencode}}"