Please help. I am fresh out of sanity.
See codepen here for an example .
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.
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));
});
});
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.