进度条在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>