Comment utiliser ng-href avec l'url absolue?

Je suis encore nouveau pour angularjs, et j'ai un problème que j'ai l'impression de ne pas être en mesure de trouver une solution, et je n'ai pas le temps d'aller regarder dans angulaire de la source.

C'est mon scénario:

J'ai quelques données json avec la collection d'url que je veux montrer à l'écran.
J'ai un élément avec ng-repeat="link in links" et à l'intérieur j'ai

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

Qui fonctionne, mais tous les liens pointent vers mondomaine/apppath/valueoflink.titre
Je veux qu'ils soient absolu, seul valueoflink.titre sans aucun préfixe.

Comment dire angulaire qu'il est absolu et non relatif url?

OriginalL'auteur Goran Obradovic | 2014-02-07

17

Comme Goran dit, la solution ne fonctionne que si toutes les urls sont comme "www.google.com'.

Si vous avez une combinaison de différents types de l'url, e.x. 'www.google.com', 'https://github.com', 'http://goo.gl', 'github.com', vous pouvez utiliser ng-href avec un filtre angulaire:
```
<a ng-href="{{link.url|myFilter}}">{{link.title}}</a>
```
et un filtre, ce qui aura pour effet d'ajouter: "http://' à votre url, si elle commence avec "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;
};
```
Votre solution ressemble avec problème. "github.com" - vous le retour "github.com'
J'ai modifié le script, de sorte qu'il sera désormais toujours ajouter préfixe "http" à un lien. Pouvez-vous essayer maintenant?
Je n'ai pas essayer, j'ai juste revu. Alors maintenant, il a l'air sympa.
Pour toute personne en cours d'exécution dans les erreurs d'interpolation, assurez-vous que link est définie avant d'appeler startWith() sur elle.

OriginalL'auteur Tonven
14

Je l'ai résolu en ajoutant un préfixe de données en json: "http://' à les rendre vraiment url absolues, et angularjs respecte.

Puis j'ai compris que angulaire est pas de faire quelque chose avec de la valeur, il est juste de le mettre là comme elle est, et c'est de ma faute à voir.

la mise à jour du code pour cela résout le problème lorsque toutes les urls sont comme "www.google.com'
```
<a ng-href="http://{{link.url}}">{{link.title}}</a>
```
De la plaine de vieux "inspecter l'élément" découvert problème, et j'ai ignoré le fait que ng-href lie à partir de {{value}} la syntaxe, c'est pourquoi ma première tentative de mettre ng-href="'http://'+{{value}}" échoué et m'a conduit à poser la question prématurément, mais je ne suis pas sûr si je devrais le supprimer comme je risque de ne pas être seul à faire cette erreur.

OriginalL'auteur Goran Obradovic
0

Pour simplement en utilisant une URL externe, le filtre est trop complexe. Ce qui suit est un extrait utilisé à mon site web, youtiming.com pour accéder à Yahoo! Finances News sur un ticker comme AMZN stockées dans ticker.les tiques.nom. "ticker" est la variable de boucle de ng-repeat, "ng-repeat='ticker dans 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>
```
Selon la ng-href doc (https://docs.angularjs.org/api/ng/directive/ngHref), la raison d'utiliser des ng-href est "à l'Aide Angulaire de balisage comme {{hash}} dans un attribut href fera le lien aller à l'URL erronée si l'utilisateur clique dessus avant Angulaire a une chance de remplacer {{hash}} balisage avec sa valeur.", donc, afin de faire cesser les effets secondaires tout en désactivant les 2 voies de liaison de données par des "::" pour des raisons de performances, vous tout d'abord ng-si le ticker.les tiques.le nom est disponible: Si oui, de construire l'URL, autrement, le code s'arrête jusqu'à ce qu'il devienne disponible.

Si cela prend du temps pour ticker.les tiques.nom devient disponible, vous devez vérifier votre appel de service RESTful lag ou le trafic du réseau plutôt que d'essayer de fournir des solution(s) de l'avant la fin de l'.

OriginalL'auteur Daniel C. Deng

Vous devez vous connecter pour publier un commentaire.