进度条适用于除IE(Angular+bootstrap)以外的所有浏览器

Question

我正在使用Angular和bootstrap来显示进度条。这是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属性的样式中使用角度插值时，您需要为该属性使用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

从Demi帖子中找到了解决方法。您必须按照以下方式编写自己的指令：

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>