在IE10角UI引导进度条 [英] Angular UI Bootstrap progress bar in IE10

问题描述

我采用了棱角分明的UI引导显示进度条。有我在IE浏览器的网站的问题后，我看着与IE浏览器在角UI引导网站和注意以下内容：

I'm using Angular UI Bootstrap to display a progress bar. After having problems with my site in IE, I looked with IE at the Angular UI Bootstrap website and noticed the following:

• 该进度条不IE10工作团队

• The progress bars DO NOT WORK in IE10

该进度条的工作，当我使用的开发工具切换到IE9浏览器模式

The progress bars WORK, when I switch to IE9 Browser Mode using the developer tools

由于这似乎很奇怪，我认为新版本打破了进度条，我想我在这里问。

Since this seems very strange to me that the newer version breaks the progress bars, I thought I ask here.

• 这是众所周知的问题，或者是造成这个？
我的一些奇怪的浏览器设置

• 有一种变通方法来获取进度条在IE10工作？

• Is this problem known, or is some strange browser setting of mine causing this?
• Is there a workaround to get the progress bars work in IE10?

修改

推荐答案

这是很简单，用一个指令您 $观看的范围为您的变量（在你的元素的属性定义），当它改变了你在你的元素的属性更改值。

It is very simple, with a directive you $watch the scope for your variable (defined in the attribute of your element), and when it changes you change the value in your element's attribute.

plnkr.co code例如

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

这篇关于在IE10角UI引导进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！