angularjs - IE10 中的 Angular UI Bootstrap 进度条

Question

我正在使用 Angular UI Bootstrap 来显示进度条。在 IE 中我的网站出现问题后，我在Angular UI Bootstrap 网站上查看了 IE并注意到以下内容：

• 进度条在 IE10 中不起作用

• 当我使用开发人员工具切换到 IE9 浏览器模式时，进度条工作

因为这对我来说似乎很奇怪，新版本打破了进度条，我想我在这里问。

• 这个问题是已知的，还是我的一些奇怪的浏览器设置导致了这个？
• 有没有一种解决方法可以让进度条在 IE10 中工作？

编辑

该问题已在较新版本的 Angular UI Bootstrap 中得到修复。

Answer 1

这很简单，使用一个指令你$watch的scope变量（在你的元素的属性中定义），当它改变时你改变你element的属性中的值。

plnkr.co 代码示例

HTML：

<div class="progress">
  <div class="progress-bar" role="progressbar" progress-bar-watch="progress" progress-bar aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style=""></div>
</div>

JS

app.controller('MainCtrl', function($scope) {
  $scope.progress = 0;

  // Just to show that changing the value dynamically updates the DOM..
  var reversing = false;
  window.setInterval(function() {
    $scope.$apply(function() {
      if (reversing) {
        $scope.progress -= 1;
      } else {
        $scope.progress += 1;
      }

      if ($scope.progress >= 100) {
        reversing = true;
      } else if ($scope.progress <= 0) {
        reversing = false;
      }
    });
  }, 100)
})
.directive('progressBar', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var watchFor = attrs.progressBarWatch;

      // update now
      var val = scope[watchFor];
      element.attr('aria-valuenow', val)
        .css('width', val+"%");

      // watch for the value
      scope.$watch(watchFor, function(val) {
        element.attr('aria-valuenow', val)
          .css('width', val+"%");
      })
    }
  }
})

Answer 2

太棒了Dmi！感谢分享代码。但是，对您的代码稍作修改也将起作用。

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>');
      });
   }
});

Answer 3

解决方法：创建自己的指令而不是使用 Angular UI Bootstrap

这是我现在要走的路。required 指令其实很简单：

指示：

angular.module('myApp').directive('myProgress', function() {
    return function(scope, element, attrs) {

        var percentage;

        function updateProgress() {
            element.html('<div class="bar" style="width: ' + percentage + '%"></div>');
        }

        scope.$watch(attrs.myProgress, function(val) {
            percentage = val;
            updateProgress();
        });

        updateProgress();
    }
});

用法：

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

但是，我仍然对使用 Angular UI Bootstrap 的适当解决方案感兴趣。