2013-08-01 13 views
6

Ho il seguente:Utilizzare la variabile ng-repeat all'interno dell'attributo src in angularjs?

div.container 
    script(src='/js/bootstrap/holder.js') 
    p.text-info(ng-pluralize, 
       count="devices.length", 
       when="{ '0': 'There are no fragments.', 'one': 'There is 1 fragment.', 'other': 'There are {} fragments.'}") 

    ul.unstyled(ng-repeat='fragment in devices') 
     ul.thumbnails 
      li.span 
       div.thumbnail 
        img(src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}") 
        div.caption 
         h3 {{fragment.name}} 
         p {{fragment.dimension}} 
         ul.unstyled(ng-repeat='component in fragment.components') 
          li {{ component.name }} 

Il problema è in src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}", vale a dire anche se guardando il codice HTML risultante vedo una corretta src (src="holder.js/300x200") non mostra l'immagine. La mia ipotesi è che questo non è il modo in cui si utilizzano variabili angolari all'interno degli attributi ..

Come posso farlo funzionare?

EDIT: sembra che non esegue holder.js .. qui è la fonte: nella prima chiamata che ho usato angolare {{hash}} nella seconda ho messo manualmente holder.js/300x200

<div class="thumbnail"> 
    <img src="holder.js/1678x638"> 
    <img src="data:image/png;base64,iVBORw0KG...ElFTkSuQmCC" data-src="holder.js/300x200" alt="300x200" style="width: 300px; height: 200px;"> 
</div> 

risposta

9

Il documentation spiega che piuttosto chiaramente:

Utilizzando markup angolare come {{hash}} in un attributo src non funziona a destra: il browser preleverà dal URL con il testo letterale {{hash}} fino a quando Angular sostituisce l'espressione all'interno di {{hash}}. La direttiva ngSrc risolve questo problema.

quindi è necessario utilizzare:

<img ng-src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}" /> 
+0

Non funziona, anche se nel codice posso vedere: '' fusio

+0

Si prega di creare un [jsFiddle] (http: // jsfiddle. rete) che può riprodurre il problema. – Blackhole

+0

Uhmm .. senza giada sembra funzionare ... potrebbe essere giada in conflitto con angolare? http://jsfiddle.net/vXA8b/2/ (non so come fare jade e angular work in jsfiddle) – fusio

Problemi correlati