Question

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

进度条在IE10中不起作用
当我使用开发者工具切换到IE9浏览器模式时，进度条工作

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

这个问题是否已知，或者是我的某些奇怪的浏览器设置导致此问题？
是否有一种解决方法可以让IE10中的进度条工作？

修改

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

Answer 1

这很简单，你的变量$watch scope指示你的变量（在元素的属性中定义），当它改变时你改变{{1}中的值的属性。

plnkr.co code example

<强> HTML：

element

<强> JS

<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>

Answer 2

太棒了！感谢您分享代码。但是，对代码稍作修改也会有效。

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

这是我现在要走的路。所需的指令实际上非常简单：

指令：

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的正确解决方案感兴趣。

IE10中的Angular UI Bootstrap进度条

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

3 个答案: