Open links in new window using AngularJS

Question

Is there a way to tell AngularJS that I want links to be opened in new windows when the user clicks on them?

With jQuery I would do this:

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

Is there an equivalent with AngularJS?

Answer 1

Here's a directive that will add target="_blank" to all <a> tags with an href attribute. That means they will all open in a new window. Remember that directives are used in Angular for any dom manipulation/behavior. Live demo (click).

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

Here's the same concept made less invasive (so it won't affect all links) and more adaptable. You can use it on a parent element to have it affect all children links. Live demo (click).

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

Old Answer

It seems like you would just use "target="_blank" on your <a> tag. Here are two ways to go:

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

Here are the docs for $window: http://docs.angularjs.org/api/ng.$window

You could just use window, but it is better to use dependency injection, passing in angular's $window for testing purposes.