Angularjs. Open content in new tab

Question

I've read similar questions/answers on SO, but can't resolve my problem. Here is the setup: index.html

<li ng-repeat="a in article">
   <a ng-click="articleDetails(a.id)">
     {{a.title_en}}
   </a>
</li>

js file

angular.module('myApp.article', ['ngRoute'])
    .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider.when('/article/:id', {
            templateUrl: 'article/article.html',
            controller: 'ArticleDetailCtrl'
        });
        //$locationProvider.html5Mode(true);
    }])        
    .controller('ArticleDetailCtrl', ['$http', '$routeParams', '$scope', '$window', '$location',
        function ($http, $routeParams, $scope, $window, $location) {
           $scope.params = 'blabla';
        }])

article.html

<div>{{params}}</div>

Question: When I click the link in index.html new tab is opened as expected with correct url, however, instead of article details I get Not found on the webpage. What might be a problem?

EDIT 1: Function articleDetail is defined as follows in another controller that is used in index.html:

$scope.articleDetails = function (id) {
                $scope.id = id;
                $scope.window = $window.open('article/' + id, '_blank');
            }

I would like to open content in a new tab, that's why I use $window. — Asterisk, Jul 27 '15 at 11:28
`$window.open` will open the URL in a new tab which will not have the `$scope` of your angular application since the `$scope` is tied only to the window in which ng-app is initialized. That is why you are getting Not found. — v1shnu, Jul 27 '15 at 11:33

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

You cannot retain the scope of your Angular application in another window. Hence calling $window.open will open a new window which does not have your original $scope.

The scope is tied only to the window in which the ngApp is initialized.

In order to overcome this, you can use the LocalStorage of your browser.

EDIT: Please refer this

edited May 23 '17 at 11:43

Community

1
1

answered Jul 27 '15 at 11:37

v1shnu

2,211
8
39
68

Angularjs. Open content in new tab

1 Answers1