ng-style不适用于IE11和Chrome63 for progress bar

Question

我是AngularJS的新手。

我可以使用{{}}计算动态值，但新CSS不会替换旧的。

 <div class="progress-bar" role="progressbar" ng-style="width:{{survey.progressbar.width}}">

当我使用时

style="width:{{survey.progressbar.width}}"

我在Chrome中获得了预期的结果，但在IE11中却没有。

Answer 1

这不是使用ng-style的正确方法。像这样使用它。

 <div class="progress-bar" role="progressbar" ng-style="{'width' : survey.progressbar.width}">

Answer 2

我之前遇到了同样的问题。 那是因为你不了解Angularjs ng风格的技巧。见下文doc：

Angularjs提供两个指令ngClass＆amp; ngStyle他们都能够接收表达式，表达式结果是以下列表之一：

1. 一个字符串，使用对css类名的引用，每个字符串都按空格分隔。
2. 一组css类名。
3. 一个对象，它是一组键值对，key是css类名，值是boolean。当值为eq true时，将使用该类。

返回您的代码。

您更喜欢使用{{expression}}来获取动态值。

• 您使用ng-style的第一行，它将表达式检查为字符串＆＃34; width：value＆＃34;并且没有css类名称匹配，因此它不起作用

• 你只使用样式属性的第二行，它可能是浏览器布局引擎的差异。