How to open new tab in browser by using $location, angular?

Question

I have controller 'reportCtrl' and HTML that represents 6 tables with data and only several rows I show at once.

app.js

var appReport = angular.module('myAppReport', []);

appReport.config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/showreport', {templateUrl: 'app/reports/reportsView.html', controller: 'reportCtrl'});
            $routeProvider.when('/showreport/:type', {templateUrl: 'app/reports/reportsView.html', controller: 'reportCtrl'});

Each table has one button that on click, should open new tab in browser with extended table:

scope.onClick = function(path){
    var real_path = $location.path() + '/' + path + '/';
    $location.path( real_path );
    // $window.open($location.path()); // doesn't work
};

For example I have root view URL:

http://dev.test.com/reports/date/#/showreport

Now, after button is pressed I want to create :

http://dev.test.com/reports/date/#/showreport/table_name

and open it in new tab. As you see, I tried $window.open($location.path()); but it doesn't work, nothing happens.

Thanks,

Check this out: http://stackoverflow.com/questions/4907843/open-url-in-new-tab-using-javascript — Neikos, Dec 28 '13 at 21:14
you are confusing angular path, which comes after the hash in url, with a full url — charlietfl, Dec 28 '13 at 21:34
`$window.open` should work. Are you injecting the `$window` service properly? You can also try calling it like this: `$window.open(real_path,'_blank');`. Please provide more info/code or a plunk so we can get a better understanding of the problem. — shizik, Dec 28 '13 at 21:53
`window` and `$window` are not different too much. If you can't use $window, you can try like `var win=window.open(real_path , '_blank');` — the_bluescreen, Dec 28 '13 at 22:41
Related question: http://stackoverflow.com/q/20099784/584846 — Brent Washburne, Feb 19 '15 at 21:51

score 27 · Answer 1 · edited Jun 20 '14 at 14:20

27

You are opening a new window using another function which could get Angular confused.

Try passing the string in the $window.open(real_path) where real_path is a string containing the path you want to navigate

edited Jun 20 '14 at 14:20

Félix Adriyel Gagnon-Grenier

8,422
10
52
65

answered Jun 20 '14 at 13:54

Rayton Kiwelu

401
4
4

1

Welcome to SO. Be a bit more specific with your code examples, with corrected code from the actual question. – Félix Adriyel Gagnon-Grenier Jun 20 '14 at 14:16
Can you explain how that would get angular confused? – Ridan Oct 06 '17 at 17:32

score 22 · Answer 2 · answered May 21 '15 at 06:23

If you want to open angular page in a new tab on ctrl+click or in same tab, then try this :-

HTML :

<a ng-click="navigationUrl($event)">My Link</a>

JS:

    var navigationUrl = function (event) {
            if (event.ctrlKey) {
                window.open(url, '_blank'); // in new tab
            } else {
                $location.path(url); // in same tab
            }
        };

score 6 · Answer 3 · answered Sep 09 '15 at 08:12

6

One more option is to use ng-href

HTML:

 <a  ng-href="#/courses/{{employee.courseId}}/employees/{{employee.id}}" 
      target="_blank"> {{employee.employeeNumber}}
 </a>

Where url is based on where you want to redirect

answered Sep 09 '15 at 08:12

Ram

15,908
4
48
41

will this work if I right click and select "open link in new tab"? – Akash Agrawal Apr 03 '17 at 06:23
1

@AkashAgrawal yes – Ram Apr 10 '17 at 00:25

score 2 · Answer 4 · answered Jun 02 '17 at 11:56

Although the most voted answer here may work for most scenarios, I want to add the way I found to achieve what OP wants (I needed this as well):

var viewPath = '/InsideMyView';
var currentPath = window.location.href.substr(0, window.location.href.indexOf('#') + 1);
var fullPath = currentPath + viewPath;
$window.open(fullPath, '_blank');

Explanation: You just need to obtain the root URL for your app, and you can make use of # in the url (which is added by angular), then concatenate the view path to obtain the full url.

score 1 · Answer 5 · edited Jun 10 '16 at 12:01

1

For opening a new view in a new window, execute the following code:

window.open($location.$$absUrl.replace($location.$$path,NEW_PATH), '_blank');

edited Jun 10 '16 at 12:01

mangerlahn

4,746
2
26
50

answered Jun 10 '16 at 11:10

Amalraj K R

71
1
3

score 0 · Answer 6 · answered Mar 25 '15 at 22:47

This worked for me.

HTML: <div ng-click="OpenBrowserInNewTab(someKeyValue)"</div>Click Me </div>

The Controller:

`$scope.OpenBrowserInNewTab = (someKeyValue) ->
    tabWindowId = window.open('/abcdef/ghijk/' + someKeyValue + '', _blank')

    $http.post("/abcdef/ghijk/#someKeyValue", data).then (response) ->
        tabWindowId.location.href = response.headers('Location')
        return
    return`

score 0 · Answer 7 · answered Dec 20 '16 at 18:15

0

Opening view in new tab with angular parameter

   <a  target="_blank" class="btn" data-ng-href="@Url.Action("Hotel", "Home")?hotelCode={{hotel.code}}"> Click Hear</a>

answered Dec 20 '16 at 18:15

sanjeewa

564
1
5
17

DINESH Adhikari · Answer 8 · 2019-09-05T06:42:13.073

-2

try this

window.open(yourURL+'create-account',)

window.open by default open link in new tab

edited Sep 05 '19 at 06:42

answered Sep 04 '19 at 11:04

DINESH Adhikari

1,242
1
12
11

3

Why should he try that? What does that do? – Rob Sep 04 '19 at 11:21
`window.open` by default open link in new tab – DINESH Adhikari Sep 05 '19 at 06:42

How to open new tab in browser by using $location, angular?

8 Answers8

Linked