javascript - Angular 不解析 IE9 和 10 中 style 属性中的模板 {{value}}

Question

我在 NgRepeat 中显示条形列表，并使用值 frecuency 以百分比显示条形宽度。据我所知，IE 9-10 不喜欢这部分: style="width:{{type.frecuency}}%;"

<div class="drp" ng-repeat="type in weeks">
    <div style="width:{{type.frecuency}}%;" class="percentBar">
        <span ng-if="type.frecuency > 14">{{type.frecuency}}%</span>
    </div>
</div>

这是 IE 上 Angular 的问题还是我的代码有问题。谢谢

附注我知道我可以创建一个类，但修改样式属性更快。

解决方案:ng-style="setBarWidth(type.frecuency);"

     scope.setBarWidth = function(width) {
        return {width: width+'%'}; 
     };

Answer 1

当对各种 HTML 属性使用派生值时，使用提供的 Angular 指令来执行此操作始终是一个好主意。它们确保浏览器看到您希望它看到的值，而不是绑定(bind)语法(在您的情况下 {{type.frecuency}})

此处应使用 ngStyle 指令。

<div class="drp" ng-repeat="type in weeks">
    <div ng-style="width:{{type.frecuency}}%;" class="percentBar">
        <span ng-if="type.frecuency > 14">{{type.frecuency}}%</span>
    </div>
</div>

许多其他 HTML 属性也有类似的指令，请参阅 documentation获取完整列表。