0

I want to hijack a click on a link, inject a destination URL, and then I want the browser to follow the link to that destination like it normally would (no return false; and no window.location.href or window.open) .

Magne
  • 16,401
  • 10
  • 68
  • 88
  • I'm not sure if there is a way to go to any url without using window.location.href in Javascript... – JoseM Apr 16 '14 at 18:47
  • are you using Angular Router? – adrichman Apr 16 '14 at 18:48
  • Can you give us an example? Is it also ok if the link is replaced before the click or does it depend on the time of the click or anything else? Hard to tell without more information. – Marcel Gwerder Apr 16 '14 at 18:51
  • 1
    If you want the user to go anywhere you will have to use `window.location` or `window.open` or `window.replace`, unfortunately. Unless you want to have links trigger the address of a iFrame. – WASasquatch Apr 16 '14 at 18:55
  • @JoseM and @WASasquatch: I want the original click on the link to proceed like normal (open it in the same tab, or in a new tab, or in a new window, depending on how the user first clicked the link). But before the click proceeds like normal, I want to inject the modified destination. I don't want to interrupt the normal browser behavior, hence the no use of `return false;`, `event.preventDefault()` or `window.open` or similar. – Magne Apr 16 '14 at 19:08
  • @adrichman : Not using any Angular Router. – Magne Apr 16 '14 at 19:09
  • @Marcel Gwerder : The URL needs to be replaced when the user clicks the link. – Magne Apr 16 '14 at 19:09
  • @Magne I think, you are looking for this: http://stackoverflow.com/a/14387747/1888799 – veysiertekin Apr 16 '14 at 19:15
  • @adrichman Should I use Angular Router perhaps? I'm not that familiar with it. I'd be happy if you want to post an answer to this question with that approach. It might be the only possible solution. – Magne Apr 17 '14 at 11:00

2 Answers2

0

for stopping the link from activation you can use <A href="" ng-click="yourFunction()">link is here</a>that will prevent the link from going anywhere and will redirect control to you controller and function, in there you can do what you please. for the second part, you want to continue browsing to the other page without changing the page? I don't know how that could be done, but still you can trigger get requests to fetch data or you can use Iframes, I don't think there is any other way without redirecting.

Labib Ismaiel
  • 1,240
  • 2
  • 11
  • 21
0

It seems to me like you want javascript functionality without using javascript, which really doesn't make any sense to me. Could you provide one good reason for not using the window object or $window object?

If you have to use ngClick, you're pretty much out of luck. However, if you're only concerned about being able to open another window or tab when clicking on a link in your application, you should take a look at ngHref:

http://docs.angularjs.org/api/ng/directive/ngHref

It allows you dynamically define the href attribute within a link. So you could write something like this:

<my-directive>
    <a ng-href="{{getMyLink()}}">Y U NO CLICK?</a>
</my-directive>

Then in the myDirective directive, you could define:

$scope.getMyLink = function() {
  var link = 'http://hostu.rl/'
  // additional logic
  return link;
};

That's the only way I know that you could retain the default browser functionality while dynamically defining links on the page through the Angular Framework.

Mike Quinlan
  • 2,873
  • 17
  • 25
  • The reason for not using window or $window is that it will override the browser's default behavior. Then I would have to detect all ways the user could have clicked on the link (left, middle, right mouse button, enter etc.), and route based on that. And that will not catch all instances (ie. catching a right click and a press on "open link in new tab" in the context menu is impossible with javascript). So instead, I dont want to preventDefault browser behavior, but rather let it follow through as normal, with the modified destination, if at all possible.. – Magne Apr 17 '14 at 10:54
  • actually, I tried this ng-href approach, and the problem is that once you've made a click, you're in the click event, and changing the href of the original html won't affect the href of the event you're in.. you will go to the href destination the html element had before you used ng-href.. – Magne Apr 17 '14 at 10:58
  • hmmmm.... How do you not have enough information before the user clicks to determine where they are going? Maybe you should provide details on the broader scope of the problem. – Mike Quinlan Apr 17 '14 at 14:01
  • Basically it's a search result listing, and we're not creating the records of every search result until the user clicks on a result. Then we make a $http post request to the server to create the record, and get the link for it containing it's database id. – Magne Apr 17 '14 at 14:16
  • I'm afraid I can be of no further assistance then. The way I see it is there's 2 courses of action you can take. 1) Write/find a JavaScript library that will replicate the browser functionality. 2) Figure out how you can get information pertinent to the link on the page before the user clicks. – Mike Quinlan Apr 17 '14 at 14:48
  • As a side note, I also find it's a bad design practice to make someone wait for an HTTP request once they have clicked on something. – Mike Quinlan Apr 17 '14 at 14:49
  • Yeah, I know.. It's not ideal, only temporary until the architecture will be changed more thoroughly. Thanks anyways. – Magne Apr 19 '14 at 12:17