web-dev-qa-db-fra.com

AngularJs - Ouvrir l'URL dans un nouvel onglet

J'ai une application avec une page publique et une page d'administrateur. Je voudrais ouvrir la page d'administrateur dans un nouvel onglet après la connexion ..__J'ai essayé ceci, après la connexion a réussi, mais sans effet. La page publique (où se trouve l'identifiant) est en cours de rechargement:

var url = $state.href('/admin/overview');
$window.open(url, '_blank');

Des conseils seraient appréciés. Je vous remercie.

javascriptangularjsangular-ui-router
14
VictorB

Voici un travail JSFiddle , vous devez injecter $window avant de pouvoir l’utiliser:

JS:

angular.module('myApp', [])
    .controller('dummy', ['$scope', '$window', function ($scope, $window) {
    $scope.redirectToGoogle = function () {
        $window.open('https://www.google.com', '_blank');
    };
}]);

HTML:

<div ng-app="myApp" ng-controller="dummy"> 
    <a ng-href="" ng-click="redirectToGoogle()">Hello</a>
</div>
27
michelem

Voici un autre travail JSFiddle

HTML:

<div ng-controller="MyCtrl">
<a ng-href="{{url}}" target="_blank">Visit jsfiddle</a>
</div>

JS:

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.url ='http://jsfiddle.net/HB7LU/16771/';
}
13
Thomas Dijoux

Vous pouvez avoir une directive pour le faire pour vous. 

directives.redirect = function ($location, $window, $rootScope) {
    return {

        link: function (scope, element, attrs) {
            element.on("click", function () {
                if (!attrs.newwindow || attrs.newwindow == false) {
                    $location.path(attrs.redirect);
                    scope.$apply();
                }
                else {
                    var baseUrl = $location.$$absUrl.toString().substring(0, decodeURIComponent($location.$$absUrl).toString().indexOf($location.$$path.toString(), $location.$$absUrl.toString().indexOf("#")) + 1) + attrs.redirect;
                    $window.open(baseUrl);
                }
            });
        }
    }
}

Et en HTML, vous pouvez utiliser ce qui suit pour ouvrir un nouvel onglet: 

<a redirect="/admin/overview" newwindow="true">Open in new tab</a>
1
Adarsh Konchady

Je l'ai utilisé et cela fonctionne (angular4 +): <button mat-menu-item> <a href="/faq/" target="_blank" style="color: inherit; text-decoration: none;"> <mat-icon>help</mat-icon>FAQ </a> </button>

Je devais restaurer les couleurs par défaut et remplacer les couleurs du navigateur. Cela me donne toujours l'effet d'entraînement et tout avec zéro code javascript.

0
gilm

Une méthode simple pour ouvrir le lien dans un nouvel onglet,

 <a href="{{details.website}}" ng-click="openNewTab(details.website)"> 
    {{details.website}}
 </a>
     $scope.openNewTab = function (url) 
    {
      $window.open(url, '_blank');
     };

Avant de l'utiliser, vous devez injecter $window dans votre contrôleur.

0
Gopakumar AP