2013-08-01 3 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="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}"에, 즉 심지어 이미지가 표시되지 않습니다 내가 올바른 SRC (src="holder.js/300x200")를 참조 결과 HTML 보이는 것. 내 생각 엔이 속성 안의 각도 변수를 사용하는 방법이 아닙니다.

어떻게 작동합니까?

편집 : 그것은 여기 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

, 코드에서 내가 볼 수있는 경우에도 : '' – fusio

+0

는 [jsFiddle] (HTTP를 만드십시오 : // jsfiddle. net) 문제를 재현 할 수 있습니다. – Blackhole

+0

음 ... 옥이 없으면 작동하는 것 같습니다. 옥과 모순이 될 수 있습니까? http://jsfiddle.net/vXA8b/2/ (jsfiddle에서 옥과 각진 작업을하는 방법을 모르겠다) – fusio