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.
Related
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 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>
Do you know why is the {{ project.title }} before I see the real value of the scope.
And how to solve that ?
EDIT : <title>{{ pageTitle }}</title>
Page is loading
Page completely loaded
Your views for Angular.JS apps are just static HTML. If you remove the script tag that references Angular.JS, you'd end up with a page full of curly brackets in plain sight that never get replaced.
When your browser finished loading Angular.JS and loading your application, the expressions in those curly brackets are evaluated. That's why you see, for a brief moment, {{…}} in your page title.
As noted by others, the ng-cloak directive is usually the way to get rid of the flickering before the app is fully loaded.
But since ng-cloak is just CSS, it cannot be applied to the page title. You'll need ng-bind for that, as noted here.
<title ng-bind="pageTitle">Default Title</title>
You should be showing the code, but in general it's probably because you aren't using ng-cloak https://docs.angularjs.org/api/ng/directive/ngCloak
However, in the case of the title, you need to use ng-bind=project.title instead <title>{{ project.title }}</title>
Check How to hide {{title}} in <title> tag while using AngularJS?
To prevent this, you should use ng-bind instead of {{ }} for the first screen of your app.
ng-bind is a directive that is added to an element attribute, so it is displayed only when the page is loaded.
According to the description of ngBind, we usually use {{ expression }} to replace ng-bind. But in a first-loading situation, image that you firstly load AngularJS(maybe in index.html), it'll show the original {{ }}. After that, it transits to what u need. To overcome it, you can use ngCloak or just use ng-bind in your first page.
OK, please check this ?
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.