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>
Related
I've done a react project recently. and faced this warning. could not figure out the problem. There is a screenshot attached about that warning
It's basically saying you have an <a> inside another <a>
<a>
<a>Some link</a>
</a>
You have to find it.
We will need more clue in order to help.
Wild guess, do you use react-router-dom and maybe do something like this? If yes, you can remove the inner <a>, because react-router-dom's <Link> is already an <a>
<Link to="/somepage">
<a>Some page</a>
</Link>
The warning is telling you everything you need to know, don't put an <a> tag inside of another <a> tag.
I have hit this a couple times, where I want to selectively render a tag on a condition but leave the contents. My use case is a directive when I have an optional link, so I want to render the opening and closing <a> tags but leave the contents alone in either case.
<a ng-if="condition"><p>Render me always</p></a>
The only way to do it in Angular without writing custom directive is to use two ngIf conditions:
<a ng-if="condition">
<p>Render me always</p>
</a>
<p ng-if="!condition">Render me always</p>
Looking at this particular use case, this seems to be more of a cosmetic issue. Would not the ng-class directive not work for this?
<a ng-class="{'non-link':boolCondition}"><p>...contents</p></a>
CSS is responsible for the basic look & feel so create a style that reflects that and then you needn't worry about duplication or directives, etc.
.non-link {
pointer-events: none;
cursor: default;
}
ref - Is it possible to make an HTML anchor tag not clickable/linkable using CSS?
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>
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.
I have a click button. I am trying with angularjs. The page anchors at the top of the page, when I click it. How do I to stay at the same place in the browser when I click it?
<a href="#" ng-click="myFunction()">
{{_actions.refresh}}
</a>
There is a similar question here. But with jQuery solution described there. I would like to find a solution with angularjs.
<a ng-click="myFunction()">
{{_actions.refresh}}
</a>
Just remove href completely.
So, the "right" way to do it would be something like this:
<a name="myFunction"></a>
<a href="#myFunction" ng-click="myFunction()">
{{_actions.refresh}}
</a>
That way you could have some extra functionality in terms of someone sending that link, or someone visiting the page without JavaScript (have you thought about that experience yet?).
I obviously don't know your applications, but putting a name tag in there might be a helpful thing on several levels.