web-dev-qa-db-fra.com

Comment autoriser 'Ouvrir dans un nouvel onglet' lors de l'utilisation de ng-click?

J'ai un tableau sur HTML et chaque ligne mène à une page différente, avec plus de détails sur cette ligne. Mais comme j'utilise angularjs, avec ng-click, je ne peux pas faire un clic droit sur cette ligne et sélectionner "ouvrir dans un nouvel onglet". Existe-t-il un moyen de le résoudre?

Merci d'avance!

htmlangularjsangularjs-ng-click
23
jgabrielfaria

Si possible, vous devez convertir votre élément en élément d'ancrage. 

<a ng-href="{{ your dynamic url }}" ng-click="your function">Your link text</a>

Le navigateur interprétera l'élément comme un lien et vous fournira donc la liste déroulante correcte. Notez que vous devez également avoir la valeur href correcte pour ouvrir dans un nouvel onglet.

EDIT: Je recommanderais cette question si vous voulez une réponse plus détaillée sur la façon de corriger ce type de comportement à l'aide de JQuery.

27
Erex

Dans votre fonction ng-click, vous pouvez appeler window.open(url, '_blank') mais comme mot d'avertissement , cela dépendra du navigateur et des paramètres actuels .

Dans certains cas, cela s'ouvrira dans une fenêtre contextuelle et dans d'autres cas, il s'ouvrira dans un nouvel onglet. Il n'y a aucun moyen de forcer l'un ou l'autre comportement car le javascript est indépendant du navigateur, il a simplement demandé une nouvelle fenêtre et c'est au navigateur de décider comment l'implémenter. voir ici pour une discussion sur le forçage d'un onglet ou d'une fenêtre

Cependant, la seule façon d'obtenir cette option de clic droit ou le ctrl + clic pour l'ouvrir dans un nouvel onglet est si le navigateur voit un <a> tag. Sinon, il ne le traite pas comme un lien.

2
David Beech

Si vous souhaitez générer votre href dynamiquement en fonction d'une condition, vous pouvez définir votre href sur ng-mousedown événement et après cela, vous pouvez effectuer n'importe quel événement comme open link in new tab, open link in new window et click.

HTML:

<a href="javascript:void(0)" ng-mousedown="openDetailView($event, userRole)">{{label}}</a>

JS:

  $scope.openDetailView = function (event, userRole) {
         if(userRole == 'admin') {
             jQuery(event.target).attr('href', 'admin/view');

         } else {
             jQuery(event.target).attr('href', 'user/view');

         }
  };
1
Rubi saini

Vous devez utiliser l'élément d'ancrage à l'intérieur de la ligne du tableau.

HTML 

<tr>
    <a ng-href="dynamic url" ng-click="openItem($event)">Open the item</a>
</tr>

Contrôleur

$scope.openItem = function (event) {
    event.preventDefault();
    // code to open a item
}
1
Fizer Khan