javascript - ejemplos - Agregue condicionalmente target="_ blank" a los enlaces con Angular JS

angularjs tutorial

Question

Estoy construyendo un árbol de navegación en Angular JS. La mayoría de los enlaces en el árbol apuntarán a páginas dentro de mi sitio web, pero algunos pueden apuntar a sitios externos.

Si la href de un enlace comienza con http: // o https: //, entonces asumo que el enlace es para un sitio externo (una expresión regular como /^https?:///// funciona correctamente).

Me gustaría aplicar el atributo target = "_ blank" a estos enlaces. Esperaba hacer esto con angular cuando estoy creando mis enlaces:

<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>

¿Puede alguien ayudarme?

Gracias

Answer 1

Estaba a punto de crear una directiva como se sugiere y luego me di cuenta de que todo lo que necesitas hacer es esto:

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

ng-attr-xyz permite crear dinámicamente @xyz , y si el valor undefined está undefined no se crea ningún atributo, solo lo que queremos.

Answer 2

Las soluciones propuestas solo funcionarán con hrefs codificados. Fallarán si se interpolan porque angular no habrá realizado ninguna interpolación cuando se ejecute la directiva. La siguiente solución funcionará en hrefs interpolados, y se basa en la solución de 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 3

Una directiva más simple no requiere cambios en su HTML al manejar todas las etiquetas <a href="someUrl"> y agregar target="_blank" si someURL no se dirige al host actual:

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 4

Actualizar

O utilice una directiva:

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");
          }
        }
    };
});

Uso:

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

Cuando no necesite usar esto con enrutamiento angular, simplemente puede usar esto:

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