web-dev-qa-db-fra.com

Ouvrir les liens dans une nouvelle fenêtre avec AngularJS

Y a-t-il un moyen de dire à AngularJS que je veux que les liens soient ouverts dans de nouvelles fenêtres lorsque l'utilisateur clique dessus?

Avec jQuery je ferais ceci:

jQuery("a.openInNewWindow").click( function() {
    window.open(this.href);
    return false;
})

Existe-t-il un équivalent avec AngularJS?

javascriptangularjs
68
KevSheedy

Voici une directive qui ajoutera target="_blank" à toutes les balises <a> avec un attribut href. Cela signifie qu'ils s'ouvriront tous dans une nouvelle fenêtre. Rappelez-vous que les directives sont utilisées dans Angular pour toute manipulation/comportement de dom. Démo en direct (clic).

app.directive('href', function() {
  return {
    compile: function(element) {
      element.attr('target', '_blank');
    }
  };
});

Voici le même concept rendu moins invasif (pour ne pas affecter tous les liens) et plus adaptable. Vous pouvez l'utiliser sur un élément parent pour qu'il affecte tous les liens enfants. Démo en direct (clic).

app.directive('targetBlank', function() {
  return {
    compile: function(element) {
      var elems = (element.prop("tagName") === 'A') ? element : element.find('a');
      elems.attr("target", "_blank");
    }
  };
});

Ancienne réponse

Il semble que vous utiliseriez simplement "target="_blank" sur votre balise <a>. Voici deux façons de faire:

<a href="//facebook.com" target="_blank">Facebook</a>
<button ng-click="foo()">Facebook</button>

JavaScript:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $window) {
  $scope.foo = function() {
    $window.open('//facebook.com');
  };
});

Live demo here (click).

Voici la documentation pour $window: http://docs.angularjs.org/api/ng.$window

Vous pouvez simplement utiliser window, mais il est préférable d'utiliser l'injection de dépendances en transmettant $window de Angular à des fins de test.

76
m59

Ça marche pour moi. Injectez le service $window dans votre contrôleur.

$window.open("somepath/", "_blank")
44
Filipp Gaponenko

vous pouvez utiliser:

$window.open(url, windowName, attributes);
36
Sam

c'est le code de votre bouton

<a href="AddNewUserAdmin" 
   class="btn btn-info " 
   ng-click="showaddnewuserpage()">
  <span class="glyphicon glyphicon-plus-sign"></span> Add User</a>

dans le contrôleur, ajoutez simplement cette fonction.

 var app = angular.module('userAPP', []);

app.controller('useraddcontroller', function ($scope, $http, $window) {

$scope.showaddnewuserpage = function () {

    $window.location.href = ('/AddNewUserAdmin');
}

});
10
nur farazi

Les directives @ m59 fonctionneront pour ng-bind-html il vous suffit d'attendre que $viewContentLoaded se termine

app.directive('targetBlank', function($timeout) {
  return function($scope, element) {
    $scope.initializeTarget = function() {
      return $scope.$on('$viewContentLoaded', $timeout(function() {
        var elems;
        elems = element.prop('tagName') === 'A' ? element : element.find('a');
        elems.attr('target', '_blank');
      }));
    };
    return $scope.initializeTarget();

  };
});
4
Alex Daro

J'ai écrit un petit résumé qui, selon moi, peut être très utile pour quiconque cherche une solution à ce problème: lien externe

Cela ajoute les attributs target="_blank" aux éléments d'ancrage qui seraient liés à un domaine différent de celui en cours. Vous pouvez le modifier comme bon vous semble.

1
idan

J'ai parcouru de nombreux liens, mais cette réponse m'a beaucoup aidé:

$scope.redirectPage = function (data) { $window.open(data, "popup", "width=1000,height=700,left=300,top=200"); };

** les données seront l'URL absolue que vous frappez.

0
Anuj