Come generare collegamenti di ancoraggio con codifica url con AngularJS?

 {{address}}  

genera collegamenti che non sono codificati in url se ho capito bene. Qual è il modo corretto di codificare #/search?query={{address}} ?

L’indirizzo di esempio è 1260 6th Ave, New York, NY .

Puoi utilizzare il encodeURIComponent in javascript. Inoltre, è ansible trasformarlo in un filtro stringa per utilizzarlo.

Ecco l’esempio di creare un filtro di escape .

js:

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

html:

  

(aggiornato: adattandosi alla risposta di Karlies che usa ng-href invece di plain href )

@ La soluzione di Tosh restituirà #/search?query=undefined se l’ address non è definito in

  

Se preferisci ottenere una stringa vuota per la tua query, devi estendere la soluzione a

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

Ciò restituirà #/search?query= se l’ address non è definito.

Potresti usare il filtro encodeUri: https://github.com/rubenv/angular-encode-uri

  1. Aggiungi angular-encode-uri al tuo progetto:

    bower install --save angular-encode-uri

  2. Aggiungilo al tuo file HTML:

  3. Riferiscilo come dipendenza per il tuo modulo dell’app:

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

  4. Usalo nelle tue opinioni:

La risposta di Tosh ha esattamente l’idea del filtro. Raccomando di farlo proprio così. Tuttavia, se lo fai, dovresti usare “ng-href” piuttosto che “href” , poiché seguire “href” prima che le risoluzioni di binding possano portare a un link errato.

filtro:

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

vista:

  {{address}}  

questo è un esempio di codice funzionante:

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

E nel modello: