AngularJS中ng-style在IE11与Chrome63进度条失效问题求助

嗨，作为AngularJS新手遇到这种兼容性问题太正常了，我来帮你捋清楚问题出在哪以及怎么解决：

首先你用错了ng-style的语法！ng-style指令接受的是一个JavaScript对象，而不是像原生style那样写带插值的字符串。你现在的写法ng-style="width:{{survey.progressbar.width}}"是错误的，AngularJS没法正确解析这个格式。

正确的写法分两种情况： #

• 如果你的survey.progressbar.width已经包含单位（比如"75%"或者"200px"）：

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

• 如果它只是纯数字（比如75），记得要拼接单位，不然样式不会生效：

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

为什么原生style在Chrome能用但IE11不行？ #

原生style="width:{{survey.progressbar.width}}"的方式，是依赖浏览器先解析插值字符串再应用样式。Chrome对这种动态插值的处理比较宽松，但IE11的渲染引擎在处理AngularJS插值后的样式时会有兼容性问题，导致样式无法正确应用。而ng-style是AngularJS官方提供的动态样式方案，它会直接通过AngularJS的 digest 循环来更新DOM样式，兼容性更好，能在包括IE11在内的浏览器里正常工作。

你把代码改成上面的正确写法，应该就能解决IE11里的显示问题啦！

内容的提问来源于stack exchange，提问作者Meenakshi Rathod