current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

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.

share|improve this question
    
I suspect the progress bar has an isolated scope and you are running into the prototypal inheritance gotcha described here –  Rob J Aug 14 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 Aug 14 at 14:01
    
Also, that would mean that setting $scope.value with $interval wouldn't work either. But it does. –  Nick Aug 14 at 14:18

1 Answer 1

up vote 2 down vote accepted

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));
 }); 
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.