Angular Runlevel ui-bootstrap with angular-timer not showing value
Please, help. I am fresh from sanity.
See the code here for an example .
I have <timer>
from angular-timer that exposes seconds
for local scope and updates it every second which is pretty nice. Something like that:
<timer> {{seconds}} </timer>
So I thought it would be nice to use <progressbar>
from angular-ui-bootstrap and update value
on every tick. So, I went and did something like this:
<timer>
<progressbar value="seconds"></progressbar>
</timer>
This, to my surprise, doesn't work.
So, I went ahead and thought about this for what seems like two full days. Probably because it was two days when I hit it and I still don't know what's going on in the world. Anyway, I thought, "Hey, maybe somehow seconds
it won't show up in scope, so let's find out if that's okay, okay?" (maybe talking to yourself doesn't help.)
So, I started to introduce these things:
<timer>
{{seconds}}
<progressbar value="seconds"></progressbar>
</timer>
and here they are, in all their glory, seconds. On my page. Just not in my progress. Where I want them. Sure.
So, seconds
definitely reveals itself in the area.
Then I thought, "Okay, the seconds are in scope. Maybe the progressbar has an isolated scope that doesn't inherit seconds
or something. Maybe not. I don't believe that. It makes too much sense."
Any help will be like an oasis in a vast desert of disappointment.
source to share
This does not work because <timer /> does not isolate the seconds object and therefore does not expose it outside of its scope, whereas <progressbar /> isolates the value object.
To make it work with the shared scope, you can use a timer event that fires according to an interval defined by the timer and log on to that event later.
Updated code
<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));
});
});
source to share
In this case, you don't need to use the progressbar directive 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 are using bootstrap 2. For bootstrap 3 you must use the code above
source to share