Aggiungi condizionalmente target = "_ blank" ai collegamenti con Angular JS

Question

Sto costruendo un albero di navigazione in Angular JS. La maggior parte dei collegamenti nella struttura punterà alle pagine del mio sito Web, ma alcuni potrebbero puntare a siti esterni.

Se l'href di un collegamento inizia con http: // o https: //, allora presumo che il collegamento sia per un sito esterno (una regex come /^https?:\/\// esegue il trucco).

Vorrei applicare l'attributo target = "_ blank" a questi collegamenti. Speravo di farlo con angolare quando sto creando i miei collegamenti:

<ul> 
    <li ng-repeat="link in navigation"> 
     <a ng-href="{{link.href}}" [add target="_blank" if link.href matches /^https?:\/\//]>{{link.title}}</a> 
    </li> 
</ul> 

Qualcuno può darmi una mano?

Grazie

Answer 1

Aggiornamento

o utilizzare una direttiva:

module.directive('myTarget', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var href = element.href; 
      if(true) { // replace with your condition 
      element.attr("target", "_blank"); 
      } 
     } 
    }; 
}); 

Usage:

<a href="http://www.google.com" my-target>Link</a> 

---

Quando don 'T bisogno di utilizzare questo con il routing angolare si può semplicemente utilizzare questo:

<a href="http://www.google.com" target="{{condition ? '_blank' : '_self'}}">Link</a> 

Answer 2

Una più semplice direttiva non richiede cambiamenti nel codice HTML per la gestione di tutti <a href="someUrl"> tag, e l'aggiunta di target="_blank" se someURL non bersaglia l'host corrente :

yourModule.directive('a', function() { 
    return { 
    restrict: 'E', 
    link: function(scope, elem, attrs) { 
     var a = elem[0]; 
     if (a.hostname != location.host) 
     a.target = '_blank'; 
    } 
    } 
} 

Answer 3

Le soluzioni proposte funziona solo con HREF hard-coded. Falliranno se sono interpolati perché l'angolazione non avrà fatto alcuna interpolazione quando viene eseguita la direttiva. La seguente soluzione funziona su HREF interpolati, e si basa su una soluzione di Javarome:

yourModule.directive('a', function() { 
    return { 
    restrict: 'E', 
    link: function(scope, elem, attrs) { 
     attrs.$observe('href', function(){ 
     var a = elem[0]; 
     if (location.host.indexOf(a.hostname) !== 0) 
      a.target = '_blank'; 
     } 
    } 
    } 
} 

Answer 4

Stavo per creare una direttiva come suggerito e poi si rese conto che tutto quello che effettivamente bisogno di fare è questo:

<a ng-attr-target="{{(condition) ? '_blank' : undefined}}"> 
    ... 
</a> 

ng-attr-xyz consente di creare dinamicamente @xyz e se il valore è undefined non viene creato alcun attributo, solo ciò che vogliamo.