AngularJS Bootstrap 진행률 막대 최대 변경

Question

진행률 막대의 "최대"값을 변경하면 진행률 막대의 상대적 진행률이 업데이트되지 않습니다. 나는 주위에 추한 일이하지만 깔끔한 방법

<progressbar value="dynamic/max*100"><span style="color:black; white-space:nowrap;">{{dynamic}}/{{max}}</span></progressbar> 

참조 예이 있는지 알고 싶습니다 최대 값을

$scope.random = function() { 
var other = Math.floor((Math.random() * 100) + 100); 
var type; 

if (value < 25) { 
    type = 'success'; 
} else if (value < 50) { 
    type = 'info'; 
} else if (value < 75) { 
    type = 'warning'; 
} else { 
    type = 'danger'; 
} 

$scope.showWarning = (type === 'danger' || type === 'warning'); 
$scope.max = other; 
$scope.type = type; }; 

을 randomise하는 방법을 사용하여

<progressbar max="max" value="dynamic"><span style="color:black; white-space:nowrap;">{{dynamic}}/{{max}}</span></progressbar> 

여기 : http://plnkr.co/edit/urZH8i2sJUeeTgIJ7JWU?p=preview

Answer 1

한 가지 방법은 구성 단계에서 $provide.decorate()를 통해 progressbar 및 bar 지침을 장식하는 것입니다. 데코레이터 내부에서 attr.$observe()을 통해 옵저버를 추가하여 보간 값이있는 dynamicMax 속성을 관찰해야합니다. 관찰자의 콜백은 다음과 같은 절연 변수를 갱신해야

[1] scope.max

REFERENCES :

https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js#L13

[2] 범위.퍼센트

참조 :

https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js#L23 https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js#L61 https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js#L78 https://github.com/angular-ui/bootstrap/blob/master/template/progressbar/progressbar.html

---

PLUNKER DEMO

JAVASCRIPT

.config(function($provide) { 

    var progressDecorator = function($delegate) { 
     var directive = $delegate[0]; 
     var compile = directive.compile; 
     var link = directive.link; 

     directive.compile = function() { 
     compile.apply(this, arguments); 

     return function(scope, elem, attr, ctrl) { 
      link.apply(this, arguments); 

      if(angular.isDefined(attr.dynamicMax)) { 
      attr.$observe('dynamicMax', function(max) { 
       scope.max = max; 
       scope.percent = +(100 * scope.value/max).toFixed(2); 
      }); 
      } 

     }; 
     }; 

     return $delegate; 
    }; 

    $provide.decorator('progressbarDirective', progressDecorator); 
    $provide.decorator('barDirective', progressDecorator); 
    }); 

HTML

사용 dynamic-max라는 새로운 속성이 있음을

<progressbar dynamic-max="{{max}}" value="value"> 
    <span style="color:black; white-space:nowrap;">{{value}}/{{max}}</span> 
</progressbar> 

알 수 있습니다. 이것은 최대 값을 변경하기 위해 관찰중인 속성입니다. 동적 최대 값을 원할 경우 max 대신이 값을 사용하십시오. 당신이 보간 값을 할당 할 필요가 있다는 사실을 (값은 {{}}에 싸여되어야한다.

DECORATING DIRECTIVES REFERENCE

Answer 2

귀하의 example.js의 경우 진행률 표시 줄이 업데이트되지 않는 이유는 $scope.dynamic = value;이 주석 처리 되었기 때문입니다. 주석 처리를 제거하면 진행률 표시 줄이 제대로 작동하는 것 같습니다. 또한 max은 이고 총계는이며 진행 상태 (기본값은 100)이므로 동적으로 변경하려는 이유가 확실하지 않습니다. value이 바뀌어야합니다.

이 demo의 example.js을 살펴보십시오.

편집 : OP의 설명에 따라 plnkr 링크를 수정하십시오. 이 문제를 해결하기