internet-explorer - 进度条在除 IE 之外的所有浏览器中工作（Angular + bootstrap）

Question

我正在使用 Angular 和引导程序来显示进度条。这是html

<div class="progress progress-striped  active ">
    <div class="bar bar-info" style="width:{{score}}%"></div>
</div>

score来自我的控制器。此代码适用于除 IE 之外的所有浏览器。

任何帮助将不胜感激。

Answer 1

只需更改为以下内容：

<div class="progress progress-striped  active ">
    <div class="bar bar-info" ng-attr-style="width:{{score}}%;"></div>
</div>

当您想在 HTML 属性（如 style）中使用 Angular 插值时，您需要使用该ng-attr-属性的前缀，以便将其放置在浏览器中。

Answer 2

如果您的“分数”正确获取值，则应用样式略有不同，下面的代码对我有用：

将您的样式属性更改为 ng-style="width={width:'{{ score}}%'}"

<div class="progress progress-striped  active ">
    <div class="bar bar-info" ng-style="width={width:'{{ score}}%'}"></div>
</div>

Answer 3

从theDemi post找到解决方法。您必须编写自己的指令，如下所示：

angular.module('myApp').directive('myProgress', function() {
  return function(scope, element, attrs) {
  scope.$watch(attrs.myProgress, function(val) {
       element.html('<div class="bar" style="width: ' + val + '%"></div>');
  });
 }
});

用法：

 <div class="progress" my-progress="nameOfYourProgressModelVariable"></div>