2

I am currently having an anchor tag defined like

<a href="" ng-click="controllerFn(scopeVar)">Click here</a>

Inside the controller function, I am using ng-storage ($localStorage to set some values, and then using angular-ui router to go to next state. New link will open in a new tab.

$scope.controllerFn = function(var){
                    $localStorage.headings = $localStorage.headings || {};
                    $localStorage.headings[var.uuid] = var;
                    var url = $state.href('newstate', {id: var.uuid, name : var.name});
                    window.open(url,'_blank');
                };

This works as expected.

But, when user right clicks on the anchor tag and selects open in new tab, it doesn't work and user is taken to the main landing page and not to the new route.

When user selects open in new tab, I would like to call "controllerFn" so that $localStorage values are set before going to new state and link should open in new tab.

Is that possible? any ideas?

user3701057
  • 395
  • 1
  • 6
  • 22
  • I don't think you can. Have a look at this in case that can be of any help http://stackoverflow.com/questions/1631959/how-to-capture-the-browser-window-close-event – floribon Apr 01 '15 at 18:54

1 Answers1

0

The problem might be that your working with an angular app which this means your app is initialised every time your page (re)loads. Normally you wouldn't really refresh your page, angular just edits your address bar (route) without actually reloading the page. When you open a new tab your app is loaded and doesn't find your current session/user object.

Normally you would have a session context that was created by your server. When you use $window.Session to store data, the data itself is only available in the current window. Opening a new tab as I see it would result in creating a new session.

So in order for this to work you'd have to store some kind of token and make sure you check if that token is present/valid every time your app boots.

angular.module('myApp',[..]).config(function(){
         //read token 
})
Kasper Cools
  • 39
  • 2
  • I understand what you are saying. With the current code in "controllerFn" it works fine and opens in new tab. Only when user right clicks on a link and opens in a new tab, he is redirected to login. Is there a difference between opening a url in a new window through code (target=_blank) vs right click and open in new tab? – user3701057 Apr 01 '15 at 20:57
  • I'm not entirely sure, but I believe it might be related to shared scopes. An angular app lives on as long as you don't refresh the page. when you call windo.open in code you actually have the ability to share data. That last bit might explain why you share the same session/data at that point. – Kasper Cools Apr 01 '15 at 21:13
  • You might be able to share this session data due to the fact that your javascript scope in the main window stays alive. What happens when you refresh the initial window? Is the data still available once the original scope is destroyed? I would have to try this, it's just a quick theory atm – Kasper Cools Apr 01 '15 at 21:21
  • one last thing, when using window.open you always have some sort of relation keeping that window bound to the calling window (window.opener) so that would explain why window.open would work as a right click would just copy the url into a new window – Kasper Cools Apr 01 '15 at 22:01
  • I had to clear my browser cache and I noticed that when right click and opened new window it actually takes the user to the main landing page and not to the new state url. It's because I don't have href or ng-href set. How can I call controller function from href or ng-href? – user3701057 Apr 01 '15 at 23:03
  • With ng-href you could call a angular function, but this would be evaluated immediately when the view/page loads. The ng-href att actually expects a string output which will be used when the user clicks on it, so you would have to return the url in that method. A second approach is to use the href by making sure you have a ref to the angular scope via plain javascript. I created a fiddle: http://jsfiddle.net/kaspercools/o81vnxym/ – Kasper Cools Apr 02 '15 at 07:51
  • Thank you very much. I have used the ng-href option and worked like a charm. Thank you again. – user3701057 Apr 02 '15 at 21:19