Angular UI Bootstrap progress bar in IE10

Question

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.

Porche

could you please open an issue in github.com/angular-ui/bootstrap/issues?state=open so we can have a look? – Stearoptene

@Stearoptene Done, see github.com/angular-ui/bootstrap/issues/535 – Porche

Progress bar didn't work for me because IE removes style attributes it doesn't like. Solution in my case was to use the ngStyle attrbute: docs.angularjs.org/api/ng/directive/ngStyle – Braun

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

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

Keeton

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

Ladin

This is rather inefficient, because you are replacing a DOM element with another whenever the value updates.. – Keeton

Slight modifications can be suggested/inserted into the original answer to keep things consolidated. – Catharina

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

Porche