Linking to external URL with different domain from within an angularJS partial

Question

All I am trying to do is include an anchor tag inside the html of a partial that links to an external site. Were this standard html, the code would simply be:

<a href="http://www.google.com" target="_blank">google</a>

As simple as this is, I cannot seem to find a working solution for getting past angular intercepting the route (or perhaps replacing my anchor with the https://docs.angularjs.org/api/ng/directive/a directive unintentionally?).

I have scoured SO and the rest of the web and seen a myriad of solutions for dealing with: links within the same domain, routing within the SPA, routing within a page (ala $anchorScroll) but none of these are my issue exactly.

I suspect it may having something to do with using $sce but I am an Angular n00b and not really sure how to properly use that service. I tried the following in my view controller:

$scope.trustUrl = function(url) {
    return $sce.trustAsResourceUrl(url);
}

with the corresponding:

<a ng-href="{{ trustUrl(item) }}">Click me!</a>

(as described here: Binding external URL in angularjs template)

but that did not seem to do the trick (I ended up with just href="{{" in the rendered page).

Using a plain vanilla anchor link like this:

<a href="http://www.google.com">google</a>

also failed to do the trick (even though some online advised that standard href would cause a complete page reload in angular: AngularJS - How can I do a redirect with a full page load?).

I also tried adding the target=_self" attribute but that seemed to have no effect either.

Do I need to write a custom directive as described here?

Conditionally add target="_blank" to links with Angular JS

This all seems way too complicated for such a simple action and I feel like I am missing something obvious in my n00bishness, at least I hope so because this process is feeling very onerous just to link to another url.

Thanks in advance for any solutions, advice, refs or direction.

Metalinguistics

Your first snippet(the vanilla html anchor) works just fine for me. – Considered

Thanks for verifying that for me Kevin. I mus have something going on elsewhere then that is intercepting or preventing my link from working. Oddly I can right-click the link and open it in a new tab no problem, but when I left-click I get nothing. Are there any usual suspects here as far as what I should be looking at? I do have some custom code on the view for executing a parallax effect, but it is constrained to only intercept the code on a specific button that scrolls to the next slide in the view. Clicking the anchor does not interact with that code. Otherwise it is a very vanilla setup. – Metalinguistics

Kevin, I would like to accept your comment as my answer to this since it really is something aside from the anchor and you verified for me the vanilla code works. For some reason I cannot seem to figure out how to do that on here. Wow - bad day for the ole brain. – Metalinguistics

Unfortunately, since my comment doesn't really answer the question, it wouldn't be appropriate for me to post it. It would be better if instead we just wait until you resolve the issue, then you post an answer with an explanation. It's ok if the question stays open for a few days/weeks if that's what it takes to solve it. – Considered

Ahh, ok - thanks! I will get back to it then. Either way, thanks for cluing me in that my problem lies elsewhere. – Metalinguistics

It sounds like you simply have a click event listener bound somewhere that is intercepting all anchor click events. I'm somewhat of a noob to angular myself so that's about as far as i can go with suggestions, :p – Considered

Answer 1

It turns out that I did in fact have all anchor links in the page bound to an event listener and being overridden. Since that code was fundamental to the way the page worked I did not want to mess with it. Instead I bypassed it by using ng-click to call the new url as follows:

HTML:

<a class="navLinkHcp" href="{{hcpurl}}" title="Habitat Conservation Plan" target="_blank" ng-click="linkModelFunc(hcpurl)">Habitat Conservation Plan</a>

Controller:

$scope.hcpurl = 'http://eahcp.org/index.php/about_eahcp/covered_species';

$scope.linkModelFunc = function (url){
  console.log('link model function');
  $window.open(url);
}

And voila! Good to go. Thanks again to KevinB for cluing me in that this was probably the issue.

Metalinguistics

How did you figure out you had a bound event listener? I am having the same problem and cannot find the source. – Offprint

monitorEvents($0) at DevTool/console per this link: #10214203 – Forty