70

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?

0

7 Answers 7

77

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.

5
  • 1
    is there any way to get this to work on html inserted using ng-bind-html?
    – axelav
    Commented Aug 5, 2014 at 2:40
  • I'm not sure. My guess is that directives won't work in ng-bind-html for security purposes.
    – m59
    Commented Aug 5, 2014 at 3:45
  • 1
    $timeout(function() { $('.content a').attr('target', '_blank') }, 0)
    – axelav
    Commented Aug 6, 2014 at 15:02
  • And if you wanted to tie this into an $http promise?
    – Snekse
    Commented Sep 22, 2014 at 21:38
  • @Snekse Your question isn't specific enough to answer, but it sounds like something you should use ui-router for.
    – m59
    Commented Sep 22, 2014 at 22:01
46

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

$window.open("somepath/", "_blank")
1
  • That's the angular way I was looking for. :)
    – Karthik RP
    Commented Sep 24, 2016 at 11:51
38

you can use:

$window.open(url, windowName, attributes);
1
  • 2
    although you use $window like angular expects, this answer really doesn't include how to bind, which is part of ops question (it doesn't show how to convert jQuery(..) thinking to ng.
    – electblake
    Commented Jun 12, 2014 at 14:48
11

this is the code of your button

<a href="AddNewUserAdmin" 
   class="btn btn-info " 
   ng-click="showaddnewuserpage()">
  <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');
}

});
4

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

  };
});
1

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.

1

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.