ui.bootstrap deforma il tag HTML <progress>

Question

Nel mio file HTML ho un tag <progress> e ho anche iniettato il ui.bootstrap dipendenza al mio controller come segue:

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

In questa configurazione, AngularJS converte il <progress></progress> in:

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

Quando rimuovo "ui.bootstrap" funziona correttamente. Puoi giocare con l'esempio this JSFiddle.

Quando progress diventa <div class="progress ng-isolate-scope" ng-transclude=""></div> scompare. Comprendo che esiste una direttiva chiamata progress in ui.bootstrap che effettua questa conversione.

Quindi, come posso far funzionare questa barra di avanzamento? Oppure, come posso disattivare la direttiva progress di angular-ui senza rimuovere la dipendenza?

Grazie in anticipo.

Answer 1

Non sono sicuro di aver compreso la domanda o di quale versione di uiBootstrap si sta utilizzando.

La direttiva dovrebbe essere:

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

ho cambiato la versione di uiBootstrap e incluso la necessaria bootstrap.min.css in questo biforcuta Fiddle e tutto sembra funzionare bene. (guarda le risorse esterne)

Answer 2

Mi sono imbattuto in questo stesso problema. Una soluzione semplice consiste nell'usare ng-non-bindable, che è una direttiva angualr standard. Lo svantaggio è che non è possibile utilizzare alcuna direttiva o binding angolare all'interno dell'elemento di avanzamento.

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