-
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
Change "countdown" attribute from AngularJS controller? #21
Comments
I think this is what you are looking for... <!DOCTYPE html>
<html>
<head>
<title>AngularJS Timer Countdown Scope Variable</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://siddii.github.io/angular-timer/app/js/timer.js"></script>
<script>
angular.module('MyApp', ['timer']);
function MyAppController($scope) {
$scope.countdownVal = 600000;
}
MyAppController.$inject = ['$scope'];
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyAppController">
<timer interval="100" countdown="countdownVal"/>
</div>
<br/>
</body>
</html> |
I think I found a similar solution (apologies for not posting it earlier!): index.html: <timer interval="1000" countdown="countdownVal">{{seconds}}</timer> controller.js: controller('WorkoutCtrl', ['$scope', function($scope) {
$scope.$apply(function() {
$scope.countdownVal = 15;
});
$scope.$broadcast('timer-start');
}]); It does make me nervous that the broadcast appears to happen before applying the countdownVal, but perhaps that's just my not understanding AngularJS's digest lifecycle. Anyway, it works. |
Hey guys. I have a problem that takes the problem stated on this thread one step further. So, I too have an api call. However, that api call returns a list of objects. Each of those objects has a different "seconds to closing time" associated with it. Any hints on how I can initialize multiple timers on the same page, each seeded with its own countdownval ? So, I am looking to do something like this.
and my object will have the structure |
Here is the code... <!DOCTYPE html>
<html>
<head>
<title>AngularJS Timer Countdown Scope Variable</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://siddii.github.io/angular-timer/app/js/timer.js"></script>
<script>
angular.module('MyApp', ['timer']);
function MyAppController($scope, $timeout) {
$timeout(function() {
console.log("Init countdowns");
$scope.countdowns = [{countdownval:100},{countdownval:200}, {countdownval:300}];
}, 3000);
}
MyAppController.$inject = ['$scope', '$timeout'];
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="countdown in countdowns">
<div>Value = <div><timer interval="1000" countdown="countdown.countdownval">{{countdown}}</timer></div></div>
</div>
</div>
</body>
</html> |
Strangely, when using any of these, in conjunction with {{minutes}} or {{seconds}}, the counter starts over after it counts down to 0. has anyone else run into this? Edit: What I mean is the counter actually starts counting UP from the original value! |
Should be stopping according to the code - https://github.com/siddii/angular-timer/blob/master/app/js/timer.js#L238 Can you create a plunkr for the issue? |
Thank you for the advice. My app (fairly large) contained another object named "timer" in the scope. It was obviously causing all sorts of craziness. Thanks again! |
Hello, I was wondering if you can give me an advise on how to reset the countdown clock to new value after It has been stopped? I am starting and stopping it based on the command sent from it from backed via websocket. However, I am stumbled on how to reset it to new or default values. Maybe you have an advise? Thank you. var proAmControllers = angular.module('proAmControllers', ['proAmServices', 'timer']); proAmControllers.controller('ProAmCtrl',
:{{countdown}}
|
No, it won't. You probably need to re-init the directive using The problem is we don't have a proper |
Thank you |
Thanks @siddii I tried your solution to refresh the counter but its not working. I have created a plunkr |
Done. Found this line of code from the source code which really helped:
|
Cool.. I am glad you found a fix :) |
My timer markup looks like this <timer autostart='false' interval="1000" countdown="countdown">{{mminutes}}:{{sseconds}}</timer> The above solution is working to update {{countdown}} but it doesnt update {{mminutes}} or {{sseconds}} Any thoughts on this? Thanks for creating this directive! |
is it your js or github? <script src="http://siddii.github.io/angular-timer/app/js/timer.js"></script> |
@zeeshanjan82 @siddii has this line of code gone away?
|
var value = 1800; |
I am having the same issues as @mattkrebs |
I have a timer as below which works fine for Chrome and Firefox,but skips a second many times in IE. {{mminutes}}:{{sseconds}} In controller, The timer is running fine yet skips seconds only in IE. Any solution??? |
Hi,
Is there a way to change the "countdown" attribute from the AngularJS controller?
I tried something like this:
index.html
controller.js
but I receive an error:
"Error: Syntax Error: Token 'timerTime' is unexpected, expecting [:] at column 3 of the expression [{{timerTime}}] starting at [timerTime}}]."
Thanks for the great Directive!
The text was updated successfully, but these errors were encountered: