-
Notifications
You must be signed in to change notification settings - Fork 939
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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: