AngularJS – Ouvrir le lien dans un nouvel onglet lors du routage conditionnel via le contrôleur

Dans mon application, j'ai deux types de profil pour les organisations. Lorsqu'un utilisateur clique sur un nom de profil, je dois d'abord vérifier si j'ai un profil premium pour cette organisation et, si tel est le cas, acheminer l'utilisateur dans cette direction. S'il n'y a pas de profil premium, l'utilisateur est envoyé au profil standard.

Je fais cela en utilisant ng-click, qui envoie un identifiant et une ressource (dans ce cas, organisation) à un contrôleur, où les conditions sont évaluées et ensuite l'utilisateur est acheminé dans la bonne direction. Tout cela fonctionne correctement lorsqu'un utilisateur clique normalement.

Cependant, lorsqu'un utilisateur essaie d'ouvrir le lien dans un nouvel onglet, en cliquant avec le bouton droit et en sélectionnant cette option, le nouvel onglet s'ouvre avec l'URL de la page en cours. Ainsi, le ng-click et le contrôleur n'ont pas déclenché ou évalué la requête avant d'ouvrir le nouvel onglet.

Comment puis-je changer par code pour que Angular traite la requête ng-click avant d'ouvrir le nouvel onglet? Ou plus largement, comment puis-je permettre à mes utilisateurs d'ouvrir un de ces liens dans un nouvel onglet afin de ne pas simplement afficher la page qu'ils utilisent actuellement?

HTML

<div ng-controller="ProfileRouter"> <div ng-repeat="org in orgs | orderBy:'org.name'"> <a href="" ng-click="profileCheck( '{{ org.id }}', 'organisation' )">{{ org.name }}</a> </div> </div>

Contrôleur Inside ProfileRouter

 $scope.profileCheck = function (id, resource) { $http({method: 'GET', url:'/IdCheck', params:{'id': id}) .success(function(data) { var count = data.hits.found; if (count) { var hash = data.hits.hit[0].id; } if (resource == 'organisation') { theResource = 'universities'; page = 'overview'; } if (count == 1) { window.location.href = "/" + theResource + "/profile/" + hash + "/" + page; } if (count == 0) { window.location.href = "/" + resource + "/" + id; } }) .error(function(data) { $scope.data = data || "Can't get resource"; }); }

Je sais que c'est une ancienne question. Mais j'ai découvert une solution à cela et l'afficher ici pourrait aider quelqu'un d'autre.

Tout d'abord, j'ai créé une directive personnalisée pour le clic droit:

 module.directive('tabRightClick',['$parse', function($parse) { return function(scope, element, attrs) { var fn = $parse(attrs.tabRightClick); element.bind('contextmenu', function(event) { scope.$apply(function() { // event.preventDefault(); fn(scope, {$event:event}); }); }); }; }]);

Puis, appliqué cette directive comme un attribut dans le fichier HTML et appelle la même méthode appelée ng-click :

 <div ng-controller="ProfileRouter"> <div ng-repeat="org in orgs | orderBy:'org.name'"> <a href="{{locationPath}}" ng-click="profileCheck( '{{ org.id }}', 'organisation' )" tab-right-click= "profileCheck( '{{ org.id }}', 'organisation' )">{{ org.name }}</a> </div> </div>

Here locationPath est une variable liée à la $scope , que nous devons mettre en œuvre dans le contrôleur. Sa valeur doit être mise à jour dans la fonction profileCheck en fonction des différentes conditions.

 $scope.profileCheck = function (id, resource) { $http({method: 'GET', url:'/IdCheck', params:{'id': id}) .success(function(data) { var count = data.hits.found; if (count) { var hash = data.hits.hit[0].id; } if (resource == 'organisation') { theResource = 'universities'; page = 'overview'; } if (count == 1) { window.location.href = "/" + theResource + "/profile/" + hash + "/" + page; $scope.locationPath = "/" + theResource + "/profile/" + hash + "/" + page; } if (count == 0) { window.location.href = "/" + resource + "/" + id; $scope.locationPath = "/" + resource + "/" + id; } }) .error(function(data) { $scope.data = data || "Can't get resource"; }); }

J'espère que c'est utile.