Объединение angular-ui progressbar с ngClass

Я хотел бы объединить директиву progress из angular-ui с директивой ngClass.

Пока я вообще не получаю никакой реакции. Я делаю это неправильно, или это невозможно совместить?

Что мне нужно, так это progressbar, у которого класс активен, когда фоновый процесс работает, но выключается, когда он завершен или ошибочен.

HTML: 

<progress max="100" percent="progress" class='progress-striped' 
    ng-class='{"active": active}'></progress>

JS: 

$scope.active = true;
$scope.progress = {value:10, type:"danger"};

Смотрите мой плунжер на http://plnkr.co/edit/koR0VnTKdpnhhMuD16hl

Ура!

2 2
angularjs angular-ui-bootstrap ng-class

2 ответа:

Я предлагаю вам также попробовать ng-style. Ваша проблема решена здесь 

<div class="container_progress">
     <div class="progress progress-striped"   ng-class='{"active": active, "":!active}'>
       <div  class="bar" ng-style="bar_upload_style" >{{bar_upload_text}}</div>  
     </div>
</div>

И в контроллере: 

updateProgressBar(20);

 $timeout(function()
 {
 updateProgressBar(100);
 }, 4000);


function updateProgressBar(value){
 $scope.bar_upload_style = {  "width": value+'%'  };
 $scope.bar_upload_text = value + "%";

 if(value ==100) $scope.active = false;
}

См. Плунжер

В моем случае я взял индикатор выполнения из bootstrap as is и изменил %

0

Angular UI перепишите DOM, чтобы заменить тег <progress> на <div>. Оказывается, чем в этом процессе опущен ng-class.

Вы можете решить вашу проблему, обернув индикатор выполнения в другой <div> и добавив свою директиву ng-class на этот элемент. После вы можете добавить стили на .active .progress.

HTML: 

<div ng-class='{"active": active}'>
    <progress max="100" percent="progress" class='progress-striped'></progress> 
</div>

CSS: 

.active .progress {
    /* Put your styles here */
}
1