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,

Answer 1

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

Answer 2

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             }         };