Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

html5Mode + <a href=""> + <base href> causing unintended reload #1225

Closed
cfchase opened this Issue Aug 2, 2012 · 31 comments

Comments

Projects
None yet

cfchase commented Aug 2, 2012

Blank href in an anchor performs the ng-click function and is still redirecting me to the base href of my app. I created a github project reproducing the problem against angular-seed using the example code in the ngHref api documentation. https://github.com/cfchase/angular-basehref-anchor

in the app.js config:
$locationProvider.html5Mode(true);

index.html:
<base href="/app/">

partial2.html:
<input ng-model="value"/><br/>
<a id="link-1" href ng-click="value=1;return false;">link 1</a> (link, don't reload)<br/>
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br/>

I'm following the instructions for ngHref which say this should not cause a reload. I posted a comment on angular issue 1102, but since that is legacy browser related and the discussion didn't seem related, I submitted a new issue.

ejain commented Aug 16, 2012

I'm not using html5 mode or setting a base URL, but ran into the same issue on an old iPhone.

The following link (note the missing "href") reloads the page instead of executing foo():

<a data-ng-click="foo()">...</a>

Adding a "javascript:" href appears to fix the problem:

<a data-ng-click="foo()" href="javascript:">...</a>

I am using html5 mode, but not setting a base and get the same result. It would be nice for a way to disable the default click action from ng-click (or some mechanism other than using "javascript:" in the href to short-circuit it)

Contributor

hkdobrev commented Sep 11, 2012

I believe this is related to the 'a' directive. When you have a link <a ...>click here</a>, even without ng-click it is actually a directive:

https://github.com/angular/angular.js/blob/master/src/ng/directive/a.js

And AngularJS cheks if it has a href attribute and adds one with empty value.

aluedeke commented Oct 5, 2012

I could also reproduce this issue. This breaks all bootstrap dropdowns in our app.

tpodom commented Oct 9, 2012

I ran into a similar issue trying to use Select2 which adds an <a href="#" onclick="return false;">which is causing a click to navigate back to first page of the app when in html5 mode.

In this instance I tracked it down to the rootElement.bind("click") handler in the LocationProvider. In html5 mode the rewrittenUrl from:

  var absHref = elm.prop('href'),
      rewrittenUrl = $location.$$rewriteAppUrl(absHref);

is set and we fall into the if block that manually updates the location. In this particular case the onclick handler has no effect because angular is still processing the click event and navigating.

mnieper commented Oct 13, 2012

I have run into the same issue.

Problem seems to be that a.href yields the base url in the href attribute is set to "", which makes the code mentioned above fall into the if block.

If the href attribute is not set at all, a.href yields "", which would make the LocationProvider code work. Unfortunately, AngularJS adds an empty href attribute whenever there is none.

Try:

Bar

cfchase commented Nov 5, 2012

Seems like that would always redirect me, which is what we're trying to avoid.

According to the docs using a blank href or omitting href altogether should prevent the link behavior and just peform the ng-click. It works fine in normal mode, however in html5mode, it's broken.

We're using the href="javascript:" as a workaround, but that doesn't address the bug itself.

I also experience this same issue. I use the ugly workaround but only because I'm forced to at this point.

dylang commented Nov 20, 2012

Having this problem as well. Our <a>'s have no href so this is getting hit:

if (!element.attr('href')) {
          event.preventDefault();
        }

But it's not preventing the page from going to the <base href="/our/base/href">.

adnan-i commented Dec 17, 2012

+1 for resolving this.
Although we do have a workaround (e.g. replacing href="#" with href="javascript: void(0)") it's still an annoying bug (and somewhat hard to trace bug) that should be fixed.

vizo commented Jan 6, 2013

+1

I can confirm this bug against v1.0.4-51d501aa build. This happens only when html5mode is enabled.
When html5mode is disabled, it works as expected.

Isn't the suggested pattern to use a button instead of an a tag for UI actions? I get the reloads even without using empty a href tags.

cfchase commented Jan 23, 2013

I feel like there's lots of use cases for ngClick to work on things other than buttons. In my case it's bootstrap dropdowns, but there's plenty of others, some of which are listed. There's workarounds, or efforts to style buttons to look like other things, but they're less than ideal.

The documented behavior is not working as expected in html5 mode.

There seems to be an similar bug filed already #1102

freeman commented Feb 27, 2013

I am also seeing this issue. Modifying the href to javascript: worked but this kinds of defeats the purpose of the a directive :(

Even if one doesn't choose to use an A tag or, instead, $location, there is an intended reload when navigating back to the root route.

pateras commented Mar 3, 2013

Having the same problem with both anchors and $location.path.

Any news on this? It seems a important issue to me, why is still open after 9 months?

pateras commented Apr 19, 2013

Try href="javascript:". Worked for me.

Contributor

just-boris commented Apr 21, 2013

In Angular 1.0.6 all my links are working fine. So this issue might be closed

L42y commented Apr 21, 2013

@just-boris Not in 1.1.4

cfchase commented Apr 22, 2013

I merged angular seed with 1.0.6 into my test project (https://github.com/cfchase/angular-basehref-anchor) and get the same results. I still causes unexpected reloads on blank hrefs.

@just-boris Your commit fixed the issue in my test project, but that's as far as I've taken testing it.

Contributor

just-boris commented Apr 22, 2013

@cfchase, and where you have come from empty hrefs? The previous version of the angular added it yourself, but the current does not, and reload issue is solved differently.
So I removed my override of angular when I have upgraded my project to 1.0.6

cfchase commented Apr 22, 2013

@just-boris Not sure what you mean. The test code (in partial2.html) is the sample code from ngHref from the Angular Doc. It uses empty hrefs in which the expected behavior is to perform the ng-click without reloading. That is the working behavior in non-html5 mode (in the branch "working"). If you find something in my github test project that is not correct, let me know.

cfchase commented Apr 22, 2013

@just-boris I think I figured out what you were suggesting. So in the example project with no href tag at all, the anchor works as expected. No href="javascript:;" necessary, just omit the href tag. That's awesome and a much better workaround.

Works for me:

<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

I don't think we should close the issue yet since the docs state href and href="" should behave the same way (and work fine in non html5 mode). It also doesn't address links in which you just want the ng-click to be executed.

Examples from docs that still don't work:

<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />

Thanks!

tpodom commented May 23, 2013

The test project created by @cfchase works correctly with angularjs 1.1.5 so I think this can be closed

cfchase commented May 23, 2013

@tpodom verified and closing

@cfchase cfchase closed this May 23, 2013

+1, href="javascript:" work around works.

@JeffPlummer JeffPlummer referenced this issue in angular-ui/bootstrap Jul 18, 2015

Closed

href on tab changes location when deleting tab #3961

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment