I'm using angular-ui-router and have an issue with empty a tags, like href='#'. I'm using bootstrap, which makes extensive use of href='#' for dropdowns and such. The problem is if a user selects a dropdown item then the router interprets that as a state change, which in this case is to the home page.
Is there an easy way to stop this behavior without having to resort to changing all the href='#' to href=''.
Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it.
Or if you're currently using ui-sref in the anchor tag, you could actually use the href attribute instead to go to the route that the state is mapped to.
you can use this, so you can preserve the link and basically do nothing when its clicked
<a ui-sref="state" href="javascript:void(0);">Your link</a>
I use this:
<a href-void>Click me! I don't do anything, but i'm still a link!</a>
Related
Using ionic 1 I'm having problems with creation <ion-checkbox> elements inside an <a> tag.
I know it's best to avoid nesting objects inside an anchor tag, however this is currently something I cannot do anything about.
Basicly my problem is this:
<a>
<ion-checkbox>Test</ion-checkbox>
</a>
I've made a fiddle to demonstrate. If you remove the anchor tag, everything works.
How can I solve this problem, without removing the <a> tag?
I've tried using the ng-click directive to $event.stopPropagation(), but that doesn't solve the problem.
You can try this:
<a href="javascript:void(0);">
<ion-checkbox>Test</ion-checkbox>
</a>
How do we tell Angular not to try to go to a route if we simply have an anchor such as:
Home
When we click on "Home" we're just simply hiding/showing div sections on the current view with CSS but as stated, Angular thinks we're going to a specified route which we may have set up in app.js or something.
Any ideas?
Thanks much,
David
This is due to angular link rewriting explained here: https://docs.angularjs.org/guide/$location
Add target="_self" to the link to prevent it.
You should also consider Angular Directives for Bootstrap. https://angular-ui.github.io/bootstrap/
Use data-target instead of href to specify the target id
<a data-target="#home" data-toggle="tab"> Home </a>
I'm using Rangy in conjunction with AngularJS. Angular replaces href with ng-click, so calling a function becomes:
<a ng-click='theFunctionThatCallsRangy()'>Get Range</a>
Unfortunately,
range.commonAncestorContainer
is returning the node of the anchor instead of the selection:
<a ng-click='theFunctionThatCallsRangy()'>Get Range</a>
and
range.collapsed
returns true. This leads me to believe clicking the anchor responsible for generating the range is destroying the selection before the range can be created from the selection.
As soon as I modify the anchor to:
<a href='#' ng-click='theFunctionThatCallsRangy()'>Get Range</a>
the range is created as expected. However, adding href='#' causes Angular to redirect to the root domain ('/'). Swapping out <a> for <button> also works, however this breaks existing CSS.
Why is this happening? Does Rangy expect href to be present in anchor tags? Workarounds?
Rangy is only reporting what the browser tells it about the selection and has no opinion about whether the href attribute is present. As you correctly diagnosed, the problem is that when you click on an <a> element, the existing selection is destroyed by the time the click event fires. Assuming you continue using these <a> elements, your options are:
Use the mousedown event instead
Make the <a> element unselectable, which will obviously have its own consequences
Demo: http://jsfiddle.net/M6AAy/
I've just migrated to AngularJS 1.2. And I've realized that all my menu/navigation elements that were configured with data-toggle, for instance:
<li>Additional Selection</li>
are not working any more. They should toggle element with id="additionalSelection" - and this is how Angular & Bootstrap worked when I was using version 1.0.8 of Angular.
But now, when I click anchor element, Angular intercepts this click and tries to go to route additionalSelection and it causes page refresh...
Is there a way to fix it?
The solution is as simple as replacing href attribute with data-target. That solves the issue:
<li><a data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>
As dragonfly pointed out, data-target works fine instead of href.
There is a small difference in CSS. When data-target is used vs href, the cursor is not a pointer anymore. If you don't want to add extra CSS, you can do the following:
Selection
This is just a suggestion, not an elegant solution. But if you want to use href for some reason, add onclick="return false;"
Simply replace href attribute from data-target
<li><a data-target="#switchTabs" data-toggle="tab">Tabs</a></li>
The solution preserving the cursor (while still relying on data-target instead of href to navigate) is:
<li>Additional Selection</li>
the addition of href causes the cursor to switch to the hand, but leaving it blank as "" doesn't cause any page reloads.
Stumbled upon this link on ng-href and am wondering about the same thing.
Is there a way to clear the href of an ng-href link? Null values do not work post 1.0.3.
Yeah just have set whatever your return value is for ng-href to " " (<- there is one space between the quotes). It should work as expected then.
According to the commit, the preventing of empty value mainly targets to <img src> <link href> <script src>, but also incidentally prevents href of <a> from being empty which is valid value. I've written a ticket for this.