Индикатор выполнения Angular UI Bootstrap в IE10

Я использую Angular UI Bootstrap для отображения индикатора выполнения. После проблем с моим сайтом в IE я посмотрел с IE на веб-сайт Angular UI Bootstrap и заметил следующее:

  • Индикаторы выполнения НЕ РАБОТАЮТ в IE10

  • Индикаторы выполнения РАБОТАЮТ, когда я переключаюсь в режим браузера IE9 с помощью инструментов разработчика

Поскольку мне кажется очень странным, что более новая версия ломает индикаторы выполнения, я решил спросить здесь.

  • Известна ли эта проблема, или это вызвано какой-то странной настройкой моего браузера?
  • Есть ли способ заставить индикаторы выполнения работать в IE10?

ИЗМЕНИТЬ

Проблема была исправлена ​​в более новых версиях Angular UI Bootstrap.


angularjs internet-explorer-10 angularjs-bootstrap
person theDmi    schedule 19.06.2013    source источник
comment
не могли бы вы открыть проблему на github.com/angular-ui/bootstrap/issues ?state=open чтобы мы могли посмотреть?   -  person pkozlowski.opensource    schedule 19.06.2013
comment
@pkozlowski.opensource Готово, см. github.com/angular-ui/bootstrap/issues/535   -  person theDmi    schedule 19.06.2013
comment
Индикатор выполнения не работал у меня, потому что IE удаляет атрибуты стиля, которые ему не нравятся. Решением в моем случае было использование атрибута ngStyle: docs.angularjs.org/api/ng /директива/ngStyle   -  person thoredge    schedule 03.03.2015

Ответы (3)


arrow_upward
2
arrow_downward

Это очень просто, с помощью директивы вы $watch scope для своей переменной (определенной в атрибуте вашего элемента), и когда она изменяется, вы меняете значение в своем атрибуте element.

пример кода 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+"%");
      })
    }
  }
})
person Matej    schedule 27.10.2013

arrow_upward
1
arrow_downward

Шикарный Дими! Спасибо, что поделились кодом. Однако небольшая модификация вашего кода также будет работать.

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>');
      });
   }
});
person Rafat Sarosh    schedule 29.06.2013
comment
Это довольно неэффективно, потому что вы заменяете элемент DOM другим всякий раз, когда значение обновляется. - person Matej; 27.10.2013
comment
Небольшие изменения могут быть предложены / вставлены в исходный ответ, чтобы сохранить консолидацию. - person Trevor; 03.07.2014

arrow_upward
0
arrow_downward

Временное решение: создайте собственную директиву вместо использования 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.

person theDmi    schedule 19.06.2013