Dynamically binding countdown value #23
Comments
|
Sounds similar to this - #21 (comment) |
|
My initial attempts to use the methods in #21 failed but I need to spend more time on it to figureout where I'm going wrong. My scenario is retrieving data from a REST service. I hacked the time app.js to get a working version - https://gist.github.com/wisemanIV/6818132 |
|
Well, "to retrieve countdown value from a remote REST" is kind a niche request that shouldn't be solved inside the directive. I have just solved my issue by just adding a timespan attr to the directive to be able to construct and calculate the from - to countdown. The REST should be done in some service with other data manipulation. Your scope part of the directive should look like this |
|
You also should be able to do ng-attr- appended to the countdown attr and it "should" work. So the dynamic value from the model should be rendered. But it keeps throwing an error. Error: [$parse:syntax] Syntax Error: Token 'tweaked' is unexpected, expecting [:] at column 4 of the expression [{$ tweaked More about ng-attr- : http://docs.angularjs.org/guide/directive Any thoughts? |
|
@davemerwin - Here is an example using <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="http://siddii.github.io/angular-timer/bower_components/angular/angular.min.js"></script>
<script src="http://siddii.github.io/angular-timer/dist/angular-timer.min.js"></script>
<script>
angular.module('timer').controller('timerDemoController',function ($scope) {
console.log('##### $scope = ', $scope);
$scope.countdown = 50;
$scope.interval = 1000;
});
</script>
</head>
<body ng-app="timer">
<h3>Timer Countdown with ng-attr</h3>
<div ng-controller="timerDemoController">
<timer ng-attr-countdown="countdown" ng-attr-interval="interval">{{countdown}}</timer>
</div>
</body> |
|
This worked great as well. Thanks for the help! |
|
Hi! Setting the inital value for countdown works fine. However, how do I change the value after it has been set? I've put up a plunker that hopefully demonstrates the issue, in this case a button that would reset the countdown value. http://embed.plnkr.co/FAjCBGGNHo9Ne5QQJ9DF/preview Seems like a link is needed in the directive, something like this (needs of course a bit more elaboration): link: function(scope, iElement, iAttrs, ctrl) {
scope.$watch('countdownattr', function(newVal, oldVal){
if (scope.countdown) {
scope.countdown = 120;
}
});
}Update: solved it by using a listener instead. See piull request #44. |
With the listener one can set the countdown value using
$broadcast('countdown-set', value). This might be an edge case, but I
need to set a new countdown. This makes the countdown value dynamic set.
Issue siddii#23 describes how to set the value on initialization but using
this one can change the value whenever necessary.
|
Can you update your plunkr with the working reset button? I am having a similar issue and I am not fully understanding how to use the listener. |
|
@311chaos : I put up a new plnkr showing how to use broadcast to change the value of countdown. http://embed.plnkr.co/vYfICUKrpwG62p1dHHEY/preview In the example above I've also included a fix so that the last emitted millisecond value is 0 not the value just right before. Check the console. In the original code, if you have a countdown with an interval of 1000, the last emitted millis value is 1000. I wanted the last value to be 0. I'll perhaps make PR for that. |
With the listener one can set the countdown value using
$broadcast('countdown-set', value). This might be an edge case, but I
need to set a new countdown. Issue siddii#23 describes how to set the value on
initialization but using this one can change the value whenever
necessary.
Also changed the order of execution of some code to make 0 the last
emitted millis value for a countdown. In the original code the last emit
message was the value just
before 0. For example with a countdown with an interval of 1000 the last
emitted millis value was 1000.
|
how do i bind start-time as below is my code My HTML Code:
{{minutes}}:{{seconds}} mins
over
My JS Code : $scope.startTimerVal = ($scope.startHour_360000)+($scope.startMin_60000)+($scope.startSec*1000); In startTimerVal I get dynamic value where I convert that value into miliseconds Using this I get below error Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{startTimerVal}}] starting at [{startTimerVal}}]. |
|
My HTML Code: [timerautostart="false"start-time="{{startTimerVal}}"]{{minutes}}:{{seconds}}[/timer] i am using square brackets instead of greater than and less than sign to show my demo code as those sign wont works here |
Great work. How do I dynamically bind the countdown value from data retrieved from a remote REST service and start the countdown once the data is retrieved?
The text was updated successfully, but these errors were encountered: