Title: AngularJs - Open url in new tab
Tags: javascript;angularjs;angular-ui-router
Question: I have an application with a public page and an admin page. I would like open the admin page in a new tab after login.
I've tried this, after the login was successful, but to no effect. The public page (where the login is) is just being reloaded:
var url = $state.href('/admin/overview');
$window.open(url, '_blank');
Any tips would be appreciated.
Thank you.
Comment: Working exmaple : https://jsfiddle.net/aniket_kulkarni/wdzjcgeL/

Comment: Is "/admin/overview" a route name? because according to the docs you cannot use that method with URIs (http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state). That might be part of the problem

Comment: The link I posted before shows several examples with route names, it's basically the only way to work with this method ($state.href that is)

Comment: Can you reproduce the error in a fiddle and post the link here?

Comment: Unfortunately not. I cannot reproduce accurately the code in a fiddle. It's too complex.

Comment: Yes, it is a route name. That may be the cause of the problem. But I was unable to find an example with routes, so I just tried it.


Here is another answer: Here's another working JSFiddle
<div ng-controller="MyCtrl"&gt;
<a ng-href="{{url}}" target="_blank"&gt;Visit jsfiddle</a&gt;
</div&gt;
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.url ='http://jsfiddle.net/HB7LU/16771/';

Here is another answer: I used this and it works (angular4+):
<button mat-menu-item&gt;
<a href="/faq/" target="_blank" style="color: inherit; text-decoration: none;"&gt;
<mat-icon&gt;help</mat-icon&gt;FAQ
</a&gt;
</button&gt;
I had to restore color to default and override browser's colors. This still gives me the ripple effect and everything with zero javascript code.

Here is another answer: A simple method to open link in new tab,
<a href="{{details.website}}" ng-click="openNewTab(details.website)"&gt;
{{details.website}}
</a&gt;
$scope.openNewTab = function (url)
$window.open(url, '_blank');
};
Before using it you should inject $window in your controller.

Here is another answer: Here is a working JSFiddle, you have to inject $window before you can use it:
angular.module('myApp', [])
.controller('dummy', ['$scope', '$window', function ($scope, $window) {
$scope.redirectToGoogle = function () {
$window.open('https://www.google.com', '_blank');
};
<div ng-app="myApp" ng-controller="dummy"&gt;
<a ng-href="" ng-click="redirectToGoogle()"&gt;Hello</a&gt;
</div&gt;
Comment for this answer: This works nicely when using an external URL (like the one you provided) but It does not work when trying to use router-ui states (or urls).

Here is another answer: You can have a directive to do this for you.
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);
}
});
}
And in HTML, you can use the following to open in a new tab:
<a redirect="/admin/overview" newwindow="true"&gt;Open in new tab</a&gt;
Comment for this answer: Here is working exmaple: https://jsfiddle.net/aniket_kulkarni/wdzjcgeL/
Comment for this answer: Your solution is putting the # in the _blank url. use this $location.$$absUrl.split('#')[0] + attrs.redirect;

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 5, 'CommentCount': 6, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:08/25/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><angularjs><angular-ui-router>', 'Title': 'AngularJs - Open url in new tab', 'ViewCount': 88813, 'id': 32198442, 'user_AboutMe': '', 'user_AccountId': 325727.0, 'user_DisplayName': 'VictorB', 'user_Reputation': 361.0, 'user_Views': 43.0, 'user_id': 647092.0}}