2

プログレスバーを表示するためにAngular UI Bootstrapを使用しています。IE のサイトで問題が発生した後、IE でAngular UI Bootstrap Web サイトを調べたところ、次のことがわかりました。

  • プログレス バーが IE10 で機能しない

  • 開発者ツールを使用して IE9 ブラウザ モードに切り替えると、進行状況バーが機能します

新しいバージョンがプログレスバーを壊すのは私には非常に奇妙に思えるので、ここで質問したいと思いました。

  • この問題は既知のものですか、それとも私の奇妙なブラウザ設定がこれを引き起こしているのでしょうか?
  • IE10 で進行状況バーを機能させるための回避策はありますか?

編集

この問題は、Angular UI Bootstrap の新しいバージョンで修正されています。

4

3 に答える 3

2

それは非常に単純で、変数 (要素の属性で定義されている) に対するディレクティブを使用$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+"%");
      })
    }
  }
})
于 2013-10-27T18:05:00.833 に答える