Conditionnellement ajouter target=“_blank” liens avec Angular JS

Je suis la construction d'une arborescence de navigation dans Angular JS. La plupart des liens dans l'arborescence de la pointe vers les pages de mon site, mais certains peuvent pointer vers des sites externes.

Si le href d'un lien commence par http://ou https://ensuite, je suis en supposant que le lien est pour un site externe (une regex comme /^https?:\/\// fait le truc).

Je voudrais appliquer la cible="_blank" attribut à ces liens. J'espérais pour ce faire angulaire lorsque je crée mes liens:

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

Quelqu'un peut-il m'aider?

Grâce

  • N'avez pas réellement le faire. Il est mauvais d'un point de vue de l'INTERFACE utilisateur. Permet de utilisateurs décider d'ouvrir de nouvelles fenêtres ou onglets.
  • Je sais ce que tu veux dire, mais si l'utilisateur est sur le site et veut cliquer sur un lien vers une ressource externe, il est logique d'ouvrir le lien dans un nouvel onglet / fenêtre plutôt que de rediriger leurs onglet en cours. Je l'utilise avec parcimonie et uniquement quand je pense que le fait d'être dirigée à l'opposé du site sans la patte de rester ouvert serait irritant / source de confusion pour certains utilisateurs.
  • pas de. Si un utilisateur est sur un site, et veut cliquer sur un lien alors il est logique d'ouvrir dans le même onglet. Si ils veulent l'ouvrir dans un nouvel onglet ils ctrl-clic ou un clic droit et de dire "ouvrir dans un nouvel onglet". NE PAS casser web conventions.
  • Web conventions? Vous avez cette idée la droite. Je suis prêt à prendre le karma sur celui-ci.
  • Il y a certainement des scénarios dans lesquels ce qui est bon à partir d'un UX point de vue. Notre AngularJS est un projet de SPA. Les utilisateurs qui appuyez/cliquez sur les liens que vous souhaitez ouvrir le lien sans perturber leur travail dans l'application. L'ouverture dans un nouvel onglet par défaut est un moyen approprié pour répondre à ce besoin.
  • En outre, je pense que vous pourriez être habitué à concevoir pour les tech-savvy utilisateurs. 🙂 Ctrl-clic/un clic droit s'apparente à de la magie noire pour nos utilisateurs, et sur mobile, tap-and-hold est de même à l'étranger.
  • l'ouverture d'un lien externe dans l'onglet actuel est une mauvaise expérience que l'utilisateur moyen ne serait pas savoir pour naviguer avec le bouton de retour. Passer 1 heure dans un UAT session et me dire à nouveau "web conventions" doivent toujours se conformer aux.
  • J'ai passé du temps à l'observation des utilisateurs. Une grande partie du problème est différent sites offrant des expériences différentes (par exemple, certains à l'aide de _blank et d'autres pas) donc ne jamais laisser les gens faire correctement formés sur la façon dont les choses fonctionnent

InformationsquelleAutor Ben Guest | 2014-05-10
  1. 68

    J'étais sur le point de créer une directive comme l'a suggéré, et alors réalisé que tout ce que vous réellement besoin de faire est ceci:

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

    ng-attr-xyz vous permet de créer dynamiquement des @xyz, et si la valeur est undefined aucun attribut n'est créé -- tout ce que nous voulons.

    • ce fut une excellente solution simple pour moi. Il conditionnellement écrit l'attribut qui est ce dont j'avais besoin dans ce cas. Simple et j'ai appris que je peux le faire avec à peu près n'importe quel attribut. Merci!
    • nice one, c'est juste ce que je recherchais. n'était pas à la recherche de l'avant à l'ajout d'une autre directive pour quelque chose de si simple!
    • Voir Angulaire Documentation pour savoir comment il fonctionne.
    • Cette question explique l'utilisation de l' ng-attr-.
    InformationsquelleAutor Mark Birbeck
  2. 35

    Mise à jour

    Ou utiliser une directive:

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

    Utilisation:

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

    Lorsque vous n'avez pas besoin d'utiliser cette Angulaire de routage, vous pouvez simplement utiliser ce:

    <a href="http://www.google.com" target="{{condition ? '_blank' : '_self'}}">Link</a>
    • Im l'impression que target="_self" prévient la routeProvider de capturer le lien modifier. Voir ici
    • correct, dans ce cas, vous avez besoin d'une simple directive
    • Ok merci. La directive a été exactement ce que je voulais. Je suppose que tout personnalisé comportement à l'égard des éléments html de bons de souscription création d'une directive.
    InformationsquelleAutor Sebastian
  3. 5

    Les solutions proposées ne fonctionne qu'avec codée en dur hrefs. Ils échoueront si elles sont interpolées car angulaire n'ont fait aucune interpolation lorsque l'instruction est exécutée. La solution suivante de travail sur interpolées hrefs, et est basé sur Javarome la solution:

    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';
      }
    }
  }
}
    InformationsquelleAutor w.brian
  4. 2

    Plus simple que la directive n'exige pas de changements dans le HTML, par la manipulation de tous <a href="someUrl"> balises, et l'ajout de target="_blank" si someURL ne sont pas la cible de l'hôte actuel:

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