2014-11-21 4 views
6

일부 제품을 표시하기 위해 스크롤러를 생성하는 간단한 지시문을 Angular로 만들었습니다.IE에서 업데이트되지 않는 각도 ng 스타일 사용 관련 문제

코드의 일부분에 문제가 있습니다.

  <ul ng-style="{'margin-left':{{currentMargin}}+'px'}"> 
       <li ng-repeat="tyre in tyres" ng-style="{'width':{{liWidth}}+'px'}"> 
        <div class="imageContainer"><img src="../Images/eutl/{{tyre.image}}"/></div> 
        <div class="details"> 
         <h3>{{tyre.name}}</h3> 
         <a href="{{tyre.link}}">About this tire</a> 
        </div> 
       </li> 
      </ul> 

and this is what it looks like in the browser once executed 
<ul ng-style="{'margin-left':0+'px'}"> 
<!-- ngRepeat: tyre in tyres --> 
<li ng-repeat="tyre in tyres" ng-style="{'width':265+'px'}" class="ng-scope" style="width: 265px;"> 
    <div class="imageContainer"><img src="../Images/eutl/tire.jpg"></div> 
    <div class="details"> 
     <h3 class="ng-binding">Fuel Efficient</h3> 
     <a href="#">About this tire</a> 
    </div> 
</li> 
<!-- end ngRepeat: tyre in tyres --></ul> 

내 페이지에서이 작업을 실행 한 후 나는 "UL"에 대한 NG 스타일하지 않는 동안 스크롤러와 "리"요소 내부의 NG 스타일이 올바르게 표시됩니다 얻는다.

"li"요소에서 똑같은 ng 스타일을 추가하려고해도 여러 솔루션을 시도했지만 처리되지 않고 스타일이 추가되지 않습니다.

내 마크 업에서 실수를 지적하거나 Li 요소에서 작동하는 하나의 ng 스타일과 UL 자체에서 작동하지 않는 다른 원인을 지적하여 도움을 줄 수 있습니까?

다른 문제는 currentMargin의 값이 IE8/9에서 업데이트되지 않는다는 것입니다.

답변

7

ng-style 객체에 평가하는 Angular expression을 받아 좋아하지 않는다.

ng-style="{width: liWidth + 'px'}" 

두 번 중괄호를 사용하는 당신에게 동적 보간 값을 삽입 할 때 : 이것은 당신이 그 표현 내부 변수를 사용하려는 경우, 당신은 (이중 중괄호없이) 직접 사용할 수 있다는 것을 의미한다 <img alt="{{product.name}} logo">과 같이 문자열을 허용하는 인수 그런 다음 이라는 표현을 안에 넣습니다.

+0

놀랍습니다. 설명 주셔서 감사합니다! –

+0

저장 한 나의 일, 환호! – Sohail

5

시도 할 수

감사합니다 :

ng-style="{'width':liWidth+'px'}"> 

없음 중괄호, NG 지시어를 많이는

관련 문제