Como gerar links de âncora codificados com url com AngularJS?

 {{address}}  

gera links que não são codificados em url se eu entendi corretamente. Qual é a maneira correta de codificar #/search?query={{address}} ?

Exemplo de endereço é 1260 6th Ave, New York, NY .

Você pode usar o encodeURIComponent nativo em javascript. Além disso, você pode transformá-lo em um filtro de string para utilizá-lo.

Aqui está o exemplo de fazer filtro de escape .

js:

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

html:

  

(atualizado: adaptando-se à resposta de Karlies que usa ng-href invés de href simples)

A solução da @Tosh retornará #/search?query=undefined se o address for indefinido em

  

Se preferir obter uma string vazia em vez de sua consulta, você precisa estender a solução para

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

Isso retornará #/search?query= se o address for indefinido.

Você poderia usar o filtro encodeUri: https://github.com/rubenv/angular-encode-uri

  1. Adicione angular-encode-uri ao seu projeto:

    bower install --save angular-encode-uri

  2. Adicione ao seu arquivo HTML:

  3. Referenciá-lo como uma dependência para o seu módulo de aplicativo:

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

  4. Use em suas visualizações:

A resposta de Tosh tem a idéia de filtro exatamente certa. Eu recomendo fazer isso assim. No entanto, se você fizer isso, deverá usar “ng-href” em vez de “href” , pois seguir o “href” antes que as resoluções de associação possam resultar em um link inválido.

filtro:

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

Visão:

  {{address}}  

Este é um exemplo de código de trabalho:

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

E no modelo:

  
Intereting Posts