angularjs - IE10 中的 Angular UI Bootstrap 进度条

Question

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

进度条在 IE10 中不起作用

当我使用开发者工具切换到 IE9 浏览器模式时，进度条有效

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

这个问题是已知的，还是我的一些奇怪的浏览器设置导致了这个问题？

是否有解决方法可以让进度条在 IE10 中工作？

编辑

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

Answer 1

很简单，用你的指令$watch scope用于您的变量(在元素的属性中定义)，当它发生变化时，您会更改 element 中的值的属性。

plnkr.co code example

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+"%");
      })
    }
  }
})