Angular UI Bootstrap progress bar in IE10

问题

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:

The progress bars DO NOT WORK in IE10
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.

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?

EDIT

The problem has been fixed in newer versions of Angular UI Bootstrap.

回答1:

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

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

回答2:

Awesome theDmi! Thanks for sharing the code. However, slight modification to your code will also work.

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

回答3:

Workaround: Create your own directive rather than using Angular UI Bootstrap

This is the path I'm taking for now. The required directive is actually very simple:

Directive:

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

Usage:

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

However, I would still be interested in a proper solution using Angular UI Bootstrap.

来源：https://stackoverflow.com/questions/17184637/angular-ui-bootstrap-progress-bar-in-ie10

标签

angularjs

internet-explorer-10

angularjs-bootstrap