使用 Internet Explorer 的 Angular JS 兼容性错误设置 div 样式答案

【问题标题】：Setting a div style using Angular JS compatibility error with Internet Explorer使用 Internet Explorer 的 Angular JS 兼容性错误设置 div 样式
【发布时间】：2014-10-21 21:47:24
【问题描述】：

我正在使用 Angular JS 显示数据库的网站上工作。我应该展示的一件事是使用 2 个 div 制作的自定义 ProgressBar，但问题是我使用 $scope 来设置宽度 (style="width: {{project.funded}}%")。它适用于 Mozilla Firefox 和 Google Chrome，但 Internet Explorer 无法识别它并将 宽度设置为自动，如图所示：http://i.imgur.com/jD6MF6n.png（在 Internet Explorer 上总是相同的进度，尽管数字不同）

代码：

<div ng-if="project.funded >= 8" class="funded_bar2" style="width:{{project.funded}}%">
   <div>
       <p class="text_funded">
          {{project.funded | number:0}}%
       </p>
       <img ng-if="project.funded < 100" 
            src="resources/img/fundedbar.png" 
            class="image_funded" />
       <img ng-if="project.funded >= 100" 
            src="resources/img/overfundedbar.png" 
            class="image_funded" />
   </div>
</div>

有没有办法解决这个兼容性问题？

【问题讨论】：

不确定这里发生了什么，但您是否尝试过使用 ng-style 代替？这是首选方法。试试 ng-style="{'width': project.funded + '%'}" 让我知道这是否有影响。
是的，它非常有效，谢谢！

标签： html angularjs internet-explorer

【解决方案1】：

IE 会在 Angular 到达之前尝试预解析样式；与 <img src="{{ }}"> 在 angular 替换之前尝试加载的方式相同。

当 IE 看到无效的 CSS 时，它会丢弃样式语句（因此 Angular 没有可读取的内容）。

解决方案是使用ng-style="{'property':value}"，就像您使用ng-src、ng-href、ng-attr-<name> 等一样。

【讨论】：