internet-explorer - IE (Angular + ブートストラップ) を除くすべてのブラウザで動作するプログレス バー

Question

プログレスバーを表示するためにAngularとbootstrapを使用しています。ここにhtmlがあります

<div class="progress progress-striped  active ">
    <div class="bar bar-info" style="width:{{score}}%"></div>
</div>

score私のコントローラーから来ています。このコードは、IE を除くすべてのブラウザーで機能します。

どんな助けでも大歓迎です。

Answer 1

「スコア」が適切に値を取得している場合は、スタイルを少し異なる方法で適用します。以下のコードは私にとってはうまくいきました:

スタイル属性を ng-style="width={width:'{{ score}}%'}" に変更します

<div class="progress progress-striped  active ">
    <div class="bar bar-info" ng-style="width={width:'{{ score}}%'}"></div>
</div>

Answer 2

TheDemi postから回避策を見つけました。次のように独自のディレクティブを作成する必要があります。

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

利用方法：

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