ui.bootstrap odkształca tag <progress> HTML

Question

W moim pliku HTML Mam <progress> tag i również wstrzykuje zależność ui.bootstrap do mojego kontrolera następująco:

var myApp = angular.module("myApp",["ui.bootstrap"]); 

W tej konfiguracji angularjs przekształca <progress></progress> na:

<div class="progress ng-isolate-scope" ng-transclude=""></div> 

Po usunięciu "ui.bootstrap" działa dobrze. Możesz grać z próbką JSFiddle this.

Po przekształceniu progress w <div class="progress ng-isolate-scope" ng-transclude=""></div> znika. Rozumiem, że istnieje dyrektywa o nazwie progress w pliku ui.bootstrap, która dokonuje tej konwersji.

Jak zatem ustawić ten pasek postępu? Lub w jaki sposób mogę wyłączyć dyrektywę kątową-ui bez usuwania zależności?

Z góry dziękuję.

Answer 1

Nie jestem pewien, czy rozumiem Twoje pytanie lub używaną wersję uiBootstrap.

Dyrektywa powinna być:

<div ng-controller="MainCtrl"> 
     <progressbar value="55"></progressbar> 
</div> 

Zmieniłem wersję uiBootstrap i zawiera niezbędne bootstrap.min.css w ten rozwidlony Fiddle i wszystko wydaje się działać poprawnie. (spójrz na zasoby zewnętrzne)

Answer 2

Po prostu wpadłem na ten sam problem. Prostym sposobem obejścia tego problemu jest użycie polecenia ng-nie-bindable, które jest standardową dyrektywą angualr. Wadą jest to, że nie można używać żadnych dyrektyw kątowych ani wiązań w ramach elementu postępu.

<progress ng-non-bindable></progress>