Amphtml: Trying to amp-bind [href] on <a> tag

Created on 27 Dec 2017 · 15Comments · Source: ampproject/amphtml

Hi @choumx , I am facing another issue again with amp-bind, we do have requirement to dynamically set the [href] on <a> tag. By default behavior, [href] does prepend 'https://domain.name' BUT amp.bind does not recognize ':' colon symbol. I personally dont see any chance that [href] will work in any case because of the conflicting of preprend colon symbol from [href] while amp.bind is not recognizing colon symbol. I tried to google around and couldn't find any example with the use of [href], while there is a guy on [stackoverflow]
(https://stackoverflow.com/questions/46286976/how-can-i-perform-string-manipulations-inside-an-amp-list-template) is facing the same issue as I am. Please advise how can I achieve amp-bind with [href], appreciate your help on this , much thanks.

dingtalk20171227210317
dingtalk20171227210531

High Priority Bug

Source

leonalicious

Most helpful comment

We found the root cause, the [href] will be prepended with https://domain only if the <a [href]> is located inside <amp-list>, hope it helps

leonalicious on 28 Dec 2017

👍3

All 15 comments

Thanks for filing this. You need to wrap the URL in quotes to make it a string (similar to JS).

<a [href]="'example.com'">

You can also use amp-state to save the URL in a variable which is a bit cleaner.

choumx on 27 Dec 2017

I did try based on your suggestion and it is still not working. Based on my understanding, I think the root cause here is the [href] will prepend https:// and amp-bind cant recognize those characters.

May I know is there any method to remove the prefix for [href] ?

leonalicious on 28 Dec 2017

Weird, I'll take a look. Thanks!

choumx on 28 Dec 2017

To be frank, our website launching date is around the corner, can I privately chat you through slack on this and also any other urgent issues that I am not too sure it only happens to us or it is the nature behavior? I know this request is a bit ridiculous, but commenting on github is a bit inefficient and slow for us.

leonalicious on 28 Dec 2017

👍1

Sure, my Slack handle is the same. I'll be online only intermittently until next Tuesday.

choumx on 28 Dec 2017

our demo is here， @choumx @micyeung

grahamle on 28 Dec 2017

We found the root cause, the [href] will be prepended with https://domain only if the <a [href]> is located inside <amp-list>, hope it helps

leonalicious on 28 Dec 2017

👍3

still appreciate ur guys to investigate into this. Thx William.

leonalicious on 29 Dec 2017

Besides a [href] method, I have also tried several other methods :

Method 1 : By using `<form>`

using <form> to perform navigation, I did try to override the <form>'s action with

    <input name="action" [value]="foo.bar">

More info please visit here

Result : http://domain/currentpage.html?action=https%3A%2F%2Fdomain%2Fcurrentpage.html

Reason : I notice the action is not being overridden as expected, in fact, the action is being encoded and appended into the URL, and not navigation as what I am expecting if on normal <html> environment.

Method 2 : By using AMP.navigateTo(url = string)

<button on="tap: AMP.navigateTo(url= 'http://www.google.com?categoryId='+foo.bar)">google.com</button>

Result:
dingtalk20180102162643

Reason: I think this method doesn't support string concatenation.

Method 3: By Appending Parameters to the href

By referring to this [documentation] (https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#appending-parameters-to-the-href)

I am visting link : https://localhost/example.html?productId=999

<button><a href="http://www.google.com?productId=QUERY_PARAM(productId)" data-amp-replace="QUERY_PARAM" data-amp-addparams="'categoryId='+(foo.bar)">This is a new Button</a></button>

Result:

I dont really know how to use this, based on my understanding, when i click on the button, it supposed to navigate the page to www.google.com?productId=999? and also, the how can I value to a amp-state on the <amp-amp-replace> & <data-amp-addparams> ?

Appreciate your help on this, not too sure which one is the easiest and most achievable to us. Please advise.

leonalicious on 2 Jan 2018

Demo page up at https://randomtestapp-a5a6f.firebaseapp.com/dynamic-href-in-amp-list.html
You'll see in Dev Tools console log that the domain of the URL is prepended to [href].

micyeung on 5 Jan 2018

👍1

Ah, this is probably due to the resolveRelativeUrl() call in sanitizer.js. The amp-bind brackets are stripped during sanitation and [href] is processed the same way as href attribute, which rewrites relative URLs as absolute URLs (hence the domain prefixing). This can be fixed.

choumx on 6 Jan 2018

@leonalicious Verified this is fixed on version 1515455265699.

choumx on 9 Jan 2018

👍1

I'm interested to see method 2 to work. Right now it doesn't seem to be able to take in amp-state or allow concatenation of parameters.
Thanks

AndrewKGuan on 16 May 2018

Is there a way to concat dynamic value to end of the url?

IshanFx on 20 Dec 2019

Is there a way to concat dynamic value to end of the url? yes i also want to know like how to use dynamic url tag after static url like my domain is same but id is different after static , so how will i use it in navigate to