Jquery 指令内的宽度在IE中不改变

我的指令在chrome中工作得很好，但在IE8中却不行：

app.directive('barMax', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            current: '=',
            max: '='
        },
        link: function postLink(scope, element, attrs) {
            scope.$watch('max', function (newValue) {
                var newContent = '';
                newContent += '<div class="bottom" style="width:{{max*2}}px;">&nbsp;</div><div class="mid" ng-class="{greater: current >= max, less: current < max}" style="width:{{current*2}}px;">&nbsp;</div><div class="top" style="height:17px;"><div style="width:41%;float:left;margin-top:2px;margin-left:2px;"></div><div style="float:left;width:50%;margin-top:2px;"></div></div>';
                element.append($compile(newContent)(scope));
            });
        }
    };
});

app.directive（'barMax'，function（$compile）{
返回{
限制：'E'，
范围：{
当前：“=”，
最大值：'='
},
链接：函数postLink（范围、元素、属性）{
范围$watch（'max'，函数（newValue）{
var newContent=''；
新内容+=''；
append（$compile（newContent）（scope））；
});
}
};
});

IE中发生的事情是。。。例如，如果先前的最大值为100，当前值为100，则灰色条的宽度为100px，彩色条的宽度为100px。彩色条的颜色将为绿色，因为电流等于最大值。。。然后我将scope.changeability更新为max:130和current:90，因此我希望灰色条的宽度为130px，彩色条的宽度为90px，但宽度不会更新。颜色正确。问题在于宽度，因为它不会更新

我还添加了polyfill

<!--[if lte IE 8]>
    <script>
        document.createElement('bar-max');
    </script>
<![endif]-->

---

IE不允许使用不熟悉的标记，因此您不能像这样使用指令作为标记。您必须使用restrict“A”，并将其用作已知html标记中的属性。如果您不想使用包装标签，请使用replace:true，如下所示

return {
        restrict: 'A',
        replace:true,
        scope: ...,
        link:...

---

你可以在这里看到一些关于所有这些的例子

你可以发布以下类的所有css吗：top、mid、bottom、greater、less。此外，内联样式+插值在我看来也很老套。我将使用

元素.css

函数来实现动态css。