Angular Bootstrap progress bar in IE10

Question

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

• Progress Indicators DO NOT WORK in IE10

• WORK progress indicators when I switch to IE9 browser mode using developer tools

Since it seems very strange to me that the new version violates the progress indicators, I thought that I was asking here.

• Is this problem known or is some strange configuration of my browser causing this?
• Is there any workaround in IE10?

EDIT

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

Answer 1

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

Sample code plnkr.co

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

Answer 2

Astonishing! Thank you for sharing the code. However, a 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>'); }); } }); 

Answer 3

Workaround: create your own directive instead of using Angular UT Bootstrap

This is the path that I am taking now. The necessary 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(); } }); 

Using:

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

However, I would still be interested in the correct solution using Angular UI Bootstrap.