Angular ui-bootstrap progressbar with angular-timer not showing value

Question

Please help. I am fresh out of sanity.

I have a <timer> from angular-timer that exposes seconds on to the local scope and updates it every second, which is pretty nice. Something like this:

<timer> {{seconds}} </timer>

So, I thought it would also be pretty nice to then use a <progressbar> from angular-ui-bootstrap and have it update the value on each tick. So, I've gone and done something like this:

<timer>
  <progressbar value="seconds"></progressbar>
</timer>

This, much to my amazement, does not work.

So, I went ahead and thought about it for what seems like two full days. That's probably because it's been two days of banging away at this and I still have no idea what in the world is going on. Anyway, I thought "hey, maybe somehow seconds isn't reeeeeally exposed on the scope, so let's find out if it is, OK? OK." (maybe talking to myself isn't helping.)

So, I proceeded to type these things:

<timer>
  {{seconds}}
  <progressbar value="seconds"></progressbar>
</timer>

and there they are, in all their glory, the seconds. On my page. Just not in my progressbar. Where I want them. Of course.

So, seconds is definitely exposed on the scope.

Then, I thought "okay. Seconds is on the scope. Maybe progressbar has an isolated scope that isn't inheriting seconds or something. Maybe. But no. I do not believe this is the case. That would make too much sense.

Any help would be like an oasis in a vast desert of frustration.

I suspect the progress bar has an isolated scope and you are running into the prototypal inheritance gotcha described here — Rob J
– Rob J, Commented Aug 14, 2014 at 12:49
I thought that too, however wouldn't that mean that $parent.seconds would work? Because that doesn't work either. I tried adding a $watch on seconds in a new controller, updating a property and then using that, but that doesn't work either. I've updated the pen to reflect these scenarios. — Nick
– Nick, Commented Aug 14, 2014 at 14:01
Also, that would mean that setting $scope.value with $interval wouldn't work either. But it does. — Nick
– Nick, Commented Aug 14, 2014 at 14:18

Tomer · Accepted Answer · 2014-08-19 05:50:03Z

4

It doesn't work because <timer/> is not isolating the seconds object and therefore not exposing it to outside of its scope, while <progressbar/> isolates the value object.
To make it work with a common scope you can use the timer-tick event that is fired according to the interval that is defined on the by the timer - and register to this event later Updated codepan

<div ng-controller="customCtrl">
  <timer interval="1000">
    {{seconds}}
    <progressbar value="timerSeconds"></progressbar>
  </timer>
</div>

app.controller('customCtrl', function($scope) {
 $scope.$on('timer-tick',function(e, val) {
   $scope.timerSeconds = (Math.floor(val.millis / 1000));
 }); 
});

answered Aug 19, 2014 at 5:50

Tomer

4,4915 gold badges41 silver badges50 bronze badges

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

Comments

Gilles Barbier · Accepted Answer · 2014-09-18 11:43:42Z

1

You do not need to use progressbar directive in this case, as there is no javascript in the bootstrap implementation :

<timer start-time='start' end-time='end'">
   <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{ 100 - (100 * millis/(endTime - startTime)) | number:0}}%;">
      </div>
   </div>
 </timer>

Note : the example given in the angular-timer docmentation does not work if you use bootstrap 2. For bootstrap 3, you should use code above

answered Sep 18, 2014 at 11:43

Gilles Barbier

411 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular ui-bootstrap progressbar with angular-timer not showing value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related