Progress Bar doesn't work after changing route on AngularJS

Question

I'm new in AngularJS world and I have so many problems when I want to use a progress bar in my App.

I'm developing a quiz which has a "progress bar" with a countdown for every question, but when I change route (when I go ahead with other question) the progressbar doesn't work anymore, only on the first question. I spent so many hours searching for a solution and I don't make it work yet. :(

I read that I had to use directives to manipulate DOM (because with I need to change value and max attributes) but I'm not able to refresh the template... Also I used this ProgressBar (http://kimmobrunfeldt.github.io/progressbar.js/) but I have the same problem.

Anyone would know to help me?

Regards, Enrique.

EDIT: This is the code:

(html)

<ion-view title="Test" hide-back-button="true" >
   <ion-content class="padding" scroll="false">
  ..
    <progress id="progressbar" value="20" max="100"></progress>
  ..
   </ion-content>
</ion-view>

(controller)

var bar = document.getElementById('progressbar');
var loadCountdown = function() {
            $interval(function() {
                    bar.value = bar.value + 10;
            }, 1000, 15);
    }

On the first view It's works perfectly, but then it doesn't.

Post some code please or better a demo.

Walid Ammar
– Walid Ammar

2014-12-27 11:09:29 +00:00
Commented Dec 27, 2014 at 11:09 — Walid Ammar
– Walid Ammar, Commented Dec 27, 2014 at 11:09
I have posted some code, but It's quiet simple.

kikettas
– kikettas

2014-12-27 12:16:22 +00:00
Commented Dec 27, 2014 at 12:16 — kikettas
– kikettas, Commented Dec 27, 2014 at 12:16

radpet · Accepted Answer · 2014-12-29 21:27:08Z

0

Use https://github.com/angular-ui/ui-router , it gives you the opportunity to use nested views and share the parent scope.

answered Dec 29, 2014 at 21:27

radpet

7311 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kikettas Over a year ago

Actually I'm using that router, could I do a dinamic declaration of the views? Because I have a Quiz with diferent kind of tests (some with 100 questions, other with 30...). Thank you.

radpet Over a year ago

yes you can look at this stackoverflow.com/questions/25866387/…

kikettas Over a year ago

I have a problem with that. For example: I'm at '../tab/test/0'and if I answer a question It goes to the next '/tab/test/1'. In this last route doesn't work the progressbar. And I'm at the same state, so I don't know if your solutions works for me because I have only 1 state.

Collectives™ on Stack Overflow

Progress Bar doesn't work after changing route on AngularJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related