Use allOrNothing for interpolating ngHref

[cancan101]

https://docs.angularjs.org/api/ng/service/$interpolate states that:

allOrNothing is useful for interpolating URLs. ngSrc and ngSrcset use this behavior.

In that case, why not also use allOrNothing for ngHref?

[lgalfaso]

Hi,
I am trying to understand the reason on this issue. Is the issue that
ngHref is not documented as part of all-or-nothing or that in this case it
is not used?

[petebacondarwin]

@cancan101 - allOrNothing is not really needed in ngHref since it is really there to prevent unwanted requests to the server before the bindings have been initialized property.

In <img ng-src="a/b/{{ c }}/x.png"> there is a point in the initialization of the binding where the interpolation is still bare, which means that the browser ignorantly makes a request to the server for "a/b/{{ c }}/x.png", which obviously won't exist. To prevent this the allOrNothing feature ensures that the src attribute contains nothing until the interpolation is ready.

The browser does not react to the href attribute in the same way (i.e. it doesn't try to make requests to the server) and so ngHref doesn't benefit in the same way from this. By the time the user gets to interact with the link it will have been initialized.

[cancan101]

A few comments on this issue:

1. It would be great if the docs for ngSrc at least mentioned the use of allOrNothing in the interpolation. A comments on ngHref that the feature is NOT used might also be nice.
2. Unwanted requests could still happen with href: http://en.wikipedia.org/wiki/Link_prefetching
3. I understand the motivation for having allOrNothing with ngSrc (that case seems clear) but I don't follow why we don't have allOrNothing on for ngHref. It seems that even if the browser does not fetch the bad resource, when would a developer want a partially formed url to be created by default?

[cancan101]

@lgalfaso @petebacondarwin What are your thoughts on my comments?

[lgalfaso]

@cancan101
1/ I agree that ngSrc should mention this (PR welcome)
2/ I find that there is a valid use case for having allOrNothing to false on ngHref, E.g when parts of the URL are optional, but most important, because it would be a breaking change so I would not recommend this to happen with 1.3.x

[cancan101]

What is the best way to get his functionality for ngHref as is without littering the code with filters doing a bunch of null/undefined checks?

[lgalfaso]

@cancan101 I do not understand your question. If there is an <a> it should have an href and the user should be allowed to click on it.

Can you please give an example of what you are trying to do?

[cancan101]

<a ng-href="foo/{{item.id}}/bar/{{another.id}}" ...>...</a>

[lgalfaso]

This is the part that I do not understand, you still need to generate html. If in a page the user is able to interact with a <a>, then it should have a valid href. Now, please explain why would you have an <a> that is not a valid link?

[cancan101]

That is exactly the problem that I am trying to solve: I do NOT want an <a> with an invalid href. I would like the case where either of item.id or another.id is null/undefined for the entire ng-href to be undefined.

[mwilc0x]

Could you maybe wrap the anchor tag in an ng-if that checks if item.id && another.id are defined? That way you could display something else to the user that the link is not available.

I don't believe ng-href will mark the entire href as null/undefined based upon one of the fields inside being null/undefined.

[cancan101]

@mjw56 I could wrap the <a> tag in an ng-if but as far as writing a custom rule taking into account the inputs that ensure a valid url, this is no better than assigning the ng-href to the output of a filter that returns null if the inputs are undefined or null.

I don't believe ng-href will mark the entire href as null/undefined based upon one of the fields inside being null/undefined.

That is the point of this post; namely, because ng-href does not use allOrNothing, the entire href will NOT be marked as null. I am arguing that it should be or in this case asking how at the very leasy to get the functionality of allOrNothing for the href.

[lgalfaso]

Hi, with just the information posted here I find the issue invalid. What an
anchor means in html is not going to change regardless of what we do