Проблемы с использованием углового ng-стиля, не обновляющегося в IE

Question

Я создал простую директиву в Angular, которая генерирует скроллер для отображения некоторых продуктов.

У меня проблема с одной частью кода.

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

после выполнения этого на моей странице я получаю скроллер и нг-стиль внутри элементов «Ли» получает отображается правильно, в то время как нг-стиль для «ул» нет.

Я пробовал несколько решений, даже пытаясь добавить один и тот же точный ng-стиль из элемента «li», и он просто не обрабатывается и стиль не добавляется.

Может ли кто-нибудь помочь мне, указав на ошибку в моей разметке или на возможную причину для одного n-стиля, работающего над элементами Li, а другой не работающий над UL?

Другая проблема, с которой я сталкиваюсь, заключается в том, что значение currentMargin не обновляется в IE8/9 и так далее.

Благодаря

Answer 1

ng-style принимает Angular expression, который оценивает к объекту. Это означает, что если вы хотите использовать переменный внутри этого выражения, вы можете использовать его непосредственно (без двойной фигурной скобки): используется

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

Дважды Curlies, когда вы хотите вставить динамическое, интерполированное значение аргумент, который принимает строку, например <img alt="{{product.name}} logo">. Затем вы положите выражение внутри те скобки.

Answer 2

Попробуйте сделать:

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

Нет фигурная скобка, много директивы нг не нравится