angularjs - example - ¿Cómo usar ng-href con url absoluta?

ng-href angularjs

Question

Todavía soy nuevo en angularjs, y tengo un problema que parece no ser capaz de encontrar una solución, y no tengo tiempo para buscar en la fuente angular.

Esta es mi situación:

Tengo algunos datos JSON con una colección de URLs que quiero mostrar en la pantalla. Tengo un elemento con ng-repeat="link in links" y dentro tengo

<a ng-href="{{link.url}}">{{link.title}}</a>

Eso funciona, pero todos los enlaces apuntan a mydomain / apppath / valueoflink.title Quiero que sean absolutos, solo valueoflink.title sin ningún prefijo.

¿Cómo decir angular que es absoluta, no relativa url?

Answer 1

Lo resolví prefijando datos en json con ''http: //'' para convertirlos en verdaderas urls absolutas, y angularjs respeta eso.

Entonces entendí que angular no está haciendo nada con valor, solo lo está poniendo allí tal como es, y es mi culpa ver eso.

actualizar el código para resolver el problema cuando todas las URL son como ''www.google.com''

<a ng-href="http://{{link.url}}">{{link.title}}</a>

El viejo problema de "inspeccionar elemento" descubrió, e ignoré el hecho de que ng-href se une a la sintaxis de {{value}}, así que este es el motivo por el que mi primer intento de poner ng-href="''http://''+{{value}}" falló y me llevó a hacer una pregunta prematuramente, pero no estoy seguro de si debería eliminarla, ya que no soy el único que comete ese error.

Answer 2

Como dijo Goran, su solución funcionará solo si todas las URL son como ''www.google.com''.

Si tiene una combinación de diferentes tipos de URL, por ejemplo, ''www.google.com'', '' https://github.com '', '' http://goo.gl '', ''github.com'', puede usar ng-href con un filtro angular:

<a ng-href="{{link.url|myFilter}}">{{link.title}}</a>

y un filtro, que agregará ''http: //'' a su url, si comienza con ''www'':

''use strict'';
myApp.filter("myFilter", function () {
return function (link) {
var result;
var startingUrl = "http://";
var httpsStartingUrl = "https://";
if(link.startWith(startingUrl)||link.startWith(httpsStartingUrl)){
result = link;
}
else {
result = startingUrl + link;
}
return result;
}
});
String.prototype.startWith = function (str) {
return this.indexOf(str) == 0;
};

Answer 3

Solo por usar una URL externa, el filtro es demasiado complejo. El siguiente es un fragmento utilizado en mi sitio web, youtiming.com, para acceder a Yahoo! Noticias financieras en un ticker como AMZN almacenado en ticker.tick.name. "ticker" es la variable de bucle de ng-repeat, "ng-repeat = ''ticker en portf.tickers''".

<div ng-if="ticker.tick.name">
<a href="http://finance.yahoo.com/quote/{{::ticker.tick.name}}/news?p={{::ticker.tick.name}}">{{::ticker.tick.name}} News from Yahoo! Finance</a>
</div>

De acuerdo con el documento ng-href ( https://docs.angularjs.org/api/ng/directive/ngHref ), la razón para usar ng-href es "Usar el marcado angular como {{hash}} en un atributo href será haga que el enlace vaya a la URL incorrecta si el usuario hace clic antes de que Angular tenga la oportunidad de reemplazar el marcado {{hash}} por su valor. ", para poder detener el efecto secundario mientras apaga los datos bidireccionales -unir por "::" por razones de rendimiento, primero ng-si está disponible ticker.tick.name: en caso afirmativo, crea la URL; de lo contrario, el código se mantendrá hasta que esté disponible.

Si se requiere un tiempo considerable para que ticker.tick.name esté disponible, debe verificar el retraso de llamadas de servicio RESTful o el tráfico de red en lugar de tratar de proporcionar soluciones complejas desde el front-end.