How to perform a type of href with parameters on an image using Ionic / Angularjs

Asked

Viewed 198 times

4

I have this snippet of code, which shows an image with a CSS on top:

 <img class="imagemCapa" image-lazy-loader="lines" ng-src="{{item.cadastra_oferta_foto}}" />
                    <div class="promocao"><b>{{item.cadastra_oferta_desconto}}% Off</b></div>
                    <div class="desconto"><b>{{item.cadastra_oferta_valor_com_desconto | currency}}</b></div>

I would like to refer this image to another $state, as I use on a button:

 <a class="item button button-clear button-assertive ink" href="#nhaac/ofertas_singles/{{item.cadastra_oferta_cod_oferta}}">MAIS INFORMAÇÕES</a>

If I put it in the img class, cut the image. I tried ui-sref but it doesn’t work.

How can I pass this url with parameters in the image and not cut the image?

Take advantage, follow the image’s CSS:

/* Coloca o desconto na imagem */
.imagemCapa{
    width: 100%;
    height: auto;

}
.promocao{
    position: absolute;
    top: 3%;
    left: 4%;

    z-index: 300;
    float: left;
    background: #D95B43;
    padding: 10px;
    border-radius: 100px;
    color: #FFF;

}

.sacola{
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 300;
    float: left;
    font-size: 40px;
    padding: 10px;
    border-radius: 100px;
    color: #E81D62;

}

EDITED:

This snippet of code shows me an image like this:

inserir a descrição da imagem aqui

In addition to the button to go to the details of this product, I would like the image to also be directed to the product details. On the button I use:

 <a class="item button button-clear button-assertive ink" href="#nhaac/ofertas_singles/{{item.cadastra_oferta_cod_oferta}}">MAIS INFORMAÇÕES</a>

But this approach in the image does not work, cuts the image not showing it all.

  • 1

    I can’t understand what you want to do.

  • @LINQ edited the question in more detail...

  • and should look like ?

  • 1

    Are you saying that when you play the <img> inside a <a> the image breaks? you have already inspected the element and removed the properties of this <a> to see if this is not it?

1 answer

3


You can mount dynamically(Coming from some controller):

ui-sref="{{vm.suaVariavel}}({parametro:'valor'})">

Or statically(Name of the direct state in the view)

ui-sref="nomeDoEstado({param1: 'valor', param2: 'valor'})" ui-sref-opts="{reload:true}"

I put the Reload true option in case you need to reload the page.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.