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>
Related
how do i put a class on <A> tag when the current ngroute matches the a tags href. I know there is ui-active in ui-router but I am using ngroute.
I made a github project that addresses your issues.
https://github.com/ionescuvictor/ngRoute-active-directive
<a route-active="active" href="/#/Test" ></a>
gets transformed into
<a class='active' href="/#/Test"></a>
Is it possible to set ng-href to go to the current page?
eg:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u={{ window.location.href }}">facebook</a>
When the above runs, I keep getting:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u=" href="https://www.facebook.com/sharer/sharer.php?u=">facebook</a>
How are you setting value to window.location.href ? This sure doesn't look like native JS.
Here's a fiddle to help you out.
ng-href is part of AngularJS and there are a few ways to point to the same page. The method I use do not include the domain so the Angular Router will direct it as needed, like the following.
ng-href="/mySubDomain"
The Docs go into detail about this and give a nice code sample that shows you what you should expect from the route change.
https://docs.angularjs.org/api/ng/directive/ngHref
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 have a page /hello where i have a link:
<a href="{{#url 'goodbye' }}{{/url}}">
that will redirect to /goodbye. But i want it to use an anchor too, something like /goodbye#message
I have tried doing:
<a href="{{#url 'goodbye' }}{{/url}}#message">
but when I click on it, it will redirect the page to /goodbye. It seems like Chaplin is deleting the anchor.
EDIT:
For the templates I'm using handlebars (with the chapling boilerplate), the {{#url}} helper generates correctly the link ( cf view-helper.js ). In the rendered page i see:
<a href="/goodbye#message">
but when i click on it, it just redirects me to /goodbye
Any idea?
Found a solution, I needed to stop the routing on the link. I just added the class noscript on the tag
<a href="{{#url 'goodbye' }}{{/url}}#message" class="noscript">
I couln't find a different way to do it. Hope this helps someone else
cf : skipRounting on Chaplin.Layout
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.