2013-08-01 8 views
6

私は、次があります。angularjsのsrc属性内でng-repeat変数を使用していますか?

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 }} 

問題は、それは画像が表示されない私は正しいSRC(src="holder.js/300x200")を参照してください結果のHTMLを見ていても、すなわち、src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}"です。私の推測では、これは属性内で角変数を使用する方法ではありません。

どうすれば動作させることができますか?

EDIT:それはここholder.js .. を実行していないようだ ソースがある:私が使用された最初の呼び出しで角度{{ハッシュ}}第二に、私は手動で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> 

答えて

9

documentationを置きますsrc属性に{{hash}}ような角度のマークアップを使用して

が正しく動作しません:はっきりと説明しているブラウザは、リテラルテキスト012でURLから取得しますまでAngularは{{hash}}の式を置き換えます。 ngSrc指令はこの問題を解決します。

だからあなたが使用する必要があります。

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

をそれが動作しない、コードで私が見ることができる場合でも:// jsfiddle: '' – fusio

+0

を[jsFiddle](HTTPを作成してください。ネット)問題を再現することができます。 – Blackhole

+0

ええええええええええええええええええええええええええええええええええええええええええええ、 http://jsfiddle.net/vXA8b/2/(jsfiddleでのヒスイと角の働きの作り方はわかりません) – fusio

関連する問題