javascript - 使用 angular ng-style 的问题，不在 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>

在我的页面上执行此操作后，我得到滚动条，“li”元素内的 ng 样式得到正确显示，而“ul”的 ng 样式没有。

我尝试了多种解决方案，甚至尝试从“li”元素添加完全相同的 ng-style，但它没有得到处理，也没有添加任何样式。

任何人都可以帮助我指出我的标记中的错误或导致一种 ng 样式处理 Li 元素而另一种不处理 UL 本身的可能原因吗？

我遇到的另一个问题是 currentMargin 的值在 IE8/9 等中没有更新。

谢谢

Answer 1

ng-style接受 Angular expression评估为一个对象。这意味着如果你想在该表达式中使用一个变量，你可以直接使用它(没有双花括号):

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

当您想将动态插值插入到接受字符串的参数(如 <img alt="{{product.name}} logo">)时，可以使用双 curl 。 .然后，您可以在这些括号中放置一个表达式。