Problems using angular ng-style rather than updating in IE

Question

I created a simple directive in Angular that generates a scroller to display some products.

I have a problem with one piece of code.

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

after doing this on my page, I get that the scroller and ng-style inside the "li" elements are displayed correctly, but the ng-style for "ul" is not.

I tried several solutions, even trying to add the same exact ng-style from the "li" element, and it just does not process and the style is not added.

Can someone help me by pointing out an error in my markup or a possible reason for one ng style working on Li elements and another not working on UL?

Another problem I am facing is that the value of currentMargin is not updated in IE8 / 9, etc.

thanks

Answer 1

ng-style accepts an Angular expression that evaluates an object. This means that if you want to use a variable inside this expression, you can use it directly (without double curls):

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

Double curls are used when you want to insert a dynamic interpolated value into an argument that takes a string, for example <img alt="{{product.name}} logo"> . Then you put the expression inside these brackets.

Answer 2

Try to do:

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

No curly brace, many ng directive don't like