Open links in new window using AngularJS

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() {;
    return false;

Is there an equivalent with AngularJS?



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="//" target="_blank">Facebook</a>
<button ng-click="foo()">Facebook</button>


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

app.controller('myCtrl', function($scope, $window) {
  $ = function() {

Live demo here (click).

Here are the docs for $window:$window

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


It works for me. Inject $window service in to your controller.

$"somepath/", "_blank")

this is the code of your button

<a href="AddNewUserAdmin" 
   class="btn btn-info " 
  <span class="glyphicon glyphicon-plus-sign"></span> Add User</a>

in the controller just add this function.

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

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

$scope.showaddnewuserpage = function () {

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


@m59 Directives will work for ng-bind-html you just need to wait for $viewContentLoaded to finish

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();


I wrote a small gist which I think can be very helpful to anybody seeking a solution to that problem: external link

What it does is it adds target="_blank" attributes to anchor elements that would link to a domain different than the current one. You can patch it up to whatever you see fit.


I have gone through many links but this answer helped me alot:

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

** data will be absolute url which you are hitting.


you can use:

$, windowName, attributes);


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.