我在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-style显示正确,而“ul”的ng-style则没有.
我尝试了多种解决方案,甚至试图从“li”元素添加相同的ng-style,它只是没有得到处理,也没有添加样式.
任何人都可以通过指出我的标记中的错误或可能导致一个ng样式处理Li元素而另一个不处理UL本身的原因来帮助我吗？
我遇到的另一个问题是currentMargin的值没有在IE8 / 9中更新,依此类推.
谢谢
解决方法
ng-style接受评估为对象的
Angular expression.这意味着如果你想在该表达式中使用一个变量,你可以直接使用它(没有双重曲线)：
ng-style="{width: liWidth + 'px'}"
如果要将动态插值值插入接受字符串的参数,例如< img alt =“{{product.name}} logo”>,则使用双曲线.然后将表达式放在这些括号内.
