links example component angularjs anchor urlencode

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

  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}}">


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}}"