AngularJS 模板在 MSIE 10 中未正确呈现

Question

我正在尝试显示带有百分比值的进度条。 no angular 版本适用于 Chrome 和 IE。但 angular 版本仅适用于 Chrome。在 IE 中它是空白的。你可以用你的IE浏览器测试一下。我还尝试将 value 设置为 "50%" 并将 html 更改为 style="{{value}}"。但还是不行。有什么我遗漏的吗？

angular.module('myApp', [])
.controller('View2Ctrl', ['$scope', function($scope) {
  $scope.value=50;
}]);

<link href="//getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  
  <p>Angular version</p>
<div class="progress" ng-controller="View2Ctrl">
  <div class="progress-bar progress-bar-dark-blue" role="progressbar" aria-valuenow="{{value}}"
       aria-valuemin="0" aria-valuemax="100" style="width:{{value}}%;">
  </div>
</div>
  
  <p>No angular version</p>
  <div class="progress">
  <div class="progress-bar progress-bar-dark-blue" role="progressbar" aria-valuenow="{{value}}"
       aria-valuemin="0" aria-valuemax="100" style="width:50%;">
  </div>
</div>
</body>

Answer 1

使用 ng-style 指令通过适当的范围绑定动态更改样式。

已将 style="width:{{value}}%;" 更改为 ng-style="{width: value + '%'}"

Working Plukr

也在 IE10 上测试过。

希望对您有所帮助。谢谢

AngularJS 模板在 MSIE 10 中未正确呈现

AngularJS template is not rendered correctly in MSIE 10

internet-explorer

templates

html-rendering

angularjs