example - ¿Cómo generar vínculos de anclaje codificados en url con AngularJS?
href in angular 5 (5)
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>
<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
.
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.
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)
Puede usar el filtro encodeUri: https://github.com/rubenv/angular-encode-uri
Añada angular-encode-uri a su proyecto:
bower install --save angular-encode-uri
Agrégalo a tu archivo HTML:
<script src="bower_components/angular-encode-uri/dist/angular-encode-uri.min.js"></script>
Referenciarlo como una dependencia para su módulo de aplicación:
angular.module(''myApp'', [''rt.encodeuri'']);
Úselo en sus puntos de vista:
<a href="#/search?query={{address|encodeUri}}">
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}}"