siddii / angular-timer Goto Github PK
View Code? Open in Web Editor NEWre-usable/inter-operable AngularJS timer directive ⛺
Home Page: http://siddii.github.io/angular-timer/
License: MIT License
re-usable/inter-operable AngularJS timer directive ⛺
Home Page: http://siddii.github.io/angular-timer/
License: MIT License
Hi I was trying to use this directive as a countdown timer but its not working. I am using below code.
{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.
Here Following is the timer clock setting for the days, hours, minutes & seconds elapsed since January 1, 2013 (GMT-6)
(01 Jan 2013 06:00:00 GMT = 1357020000000 milliseconds)
I want a countdown timer for 3 hours, so I added 180 ms into the current time stamp
eg:
var ct = new Date().getTime() + 180_60_1000;
ct = 1384205227175;
Now our code will be
{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.
and the output is something like this
-3 hours, -59 minutes, -27 seconds.
Please give me some solution for this,
I use it on a game. But can not reset countdown when the game is over.
Any way to implement the timer end-time="2014-05-29T00:00:00" inside the directive?
and how would we pass a date value from another scope provider?
see this plunker for example http://plnkr.co/edit/hO3Xrg
I need to 'reverse' countdown in terms that I need my timer starts with 0 and ends on some particular moment, lets say 30s.
As a workaround I use 'timer-tick' event and check if the running time is the time when it needs to end, and if yes, then I stop the timer, but not sure if there is a built-in way to this?
something as
thank you
Hi,
Does a "start from" millis is currently supported?
I'd like to use your component as a "time tracking" so I need a way to start, stop, resume (all good) but also start from a predefined value coming from a DB (eg. 5 minutes 34 seconds).
Thanks,
Manu
I've not been successful so far using $watch to trigger an event when something happens. A simple example is:
$scope.$watch('timer-tick', function (event, data) {
if (data.millis == 300000) {
alert('timer is below 5 minutes');
};
if (data.millis == 0) {
$scope.timer = true;
$scope.energyPost = false;
};
})
Any suggestions for what I'm missing?
Hi all, thanks for a great directive. I'm sorry for creating an issue here, but I didn't see any better way to reach out to you. I have two issues trying to implement the timer in one of my apps.
Thanks a lot in advance.
If I set a variable myTimer
when we click on a button with the following HTML but it's seems that it's not working :
<div ng-init="myTimer = 9999999999999">
Current `myTimer` : {{myTimer}}
<br/>
<button ng-click="myTimer = 88888888888888">Change the value to `88888888888888`</button>
<button ng-click="myTimer = 9999999999999">Change the value to `9999999999999`</button>
<br/>
<timer end-time="myTimer">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
</div>
It seems that the plugin does not $watch()
the attibutes.
I added this monkey patch code
in the plugin to test and it seems to work (line 39) :
$scope.$watch('endTimeAttr', function(newVal){
if(newVal){
$scope.start();
}
});
Did I miss something or we could imagine to add some $watch()
in the plugin?
If I initialize the countdown timer with 0, I expect it to appear and remain at 0. Instead, I get strange behavior because 0 is being translated into undefined.
parseInt($scope.countdownattr, 10) > 0 ?
should be:
parseInt($scope.countdownattr, 10) >= 0 ?
The countdown attribute has two-way binding yet it never updates from within the directive. It is very useful to get the value of the current countdown so that we may be able to print its value somewhere other than inside the directive easily.
Great directive. Thank you. I'm new to this, so please don't hesitate to right a wrong.
On countdown, I was looking for a reset function. So I added:
$scope.$on('timer-reset', function () {
$scope.reset();
});
Then
$scope.reset = $element[0].reset = function () {
$scope.startTime = $scope.startTimeAttr ? new Date($scope.startTimeAttr) : new Date();
$scope.endTime = $scope.endTimeAttr ? new Date($scope.endTimeAttr) : null;
$scope.countdown = $scope.countdownattr && parseInt($scope.countdownattr, 10) > 0 ? parseInt($scope.countdownattr, 10) : undefined;
resetTimeout();
tick();
$scope.isRunning = false;
$scope.clear();
}
Basically I combined 'timer-start' and 'timer-stop'. Thoughts?
Hi currently exist a method called "addCDSeconds" to the countdown but this only add time.
If I have a timer of 10 seconds and in some point I need to change it for example to 13 seconds . I need to get the current value and calculate it the difference and add it.
somethig like this:
var secondsToAdd = 13 -currentSeconds ;
I was thinking something like set a value directly maybe in this way :
$scope.setCountdown = $element[0].setCountdown = function (newTime) {
$scope.countdown = newTime;
$scope.$digest();
if (!$scope.isRunning) {
$scope.start();
}
};
I made the change in my project. I set new seconds without calculate nothing. What do you think?
This timer also works very nicely as a digital clock. I really like this mod and have been using it, but would like to add a more broadly scoped add minutes and add hours method, like a normal digital clock.
When I create it, would there be interest in me opening a PR for my new extension of this nice angularjs module?
When I use Bower to install angular-timer it downloads over 36MB of data because it's including the entire project and its dependencies.
There was discussion about this in #10 but it doesn't seem to have been resolved.
Hi,
I need to send a request to a REST API when a countdown is over. Is it possible?
How can I do it?
Thanks,
Roberto.
I get these errors:
$scope.addSeconds is undefined
Changing it to $scope.addCDSeconds
gives
$apply already in progress
This the right way to add seconds to a countdown?
Due to a new feature described here angular/angular.js@e46100f, attributes that end with "-start" or "-end" will get that truncated. So auto-start gets passed to the directive as "auto".
Took me quite a bit of time to figure out what was going on (had to git bisect the angular codebase).
The simple solution would be to call the attribute "autostart", but I guess there could be other approaches to this.
Loving the timer so far - really simple to use. I'm having one small issue however.
I have multiple timers all being kicked off with different countdown values (essentially a list of ebay style auction items counting down) inside an ng-repeat.
I see there is a 'timer-stopped' event which is ideal as I'd like to refresh the item on this event, however I can't seem to find a way for the event to tell me which timer has expired.
Is there a way of doing this? Neither the "data" or "event" arguments seem to have a timerId or equivalent, and I can't see this being used in any of your examples.
Thanks in advance.
This is very flexible when you want to change time interval for polling or other timers.
Sid helped me with it. Below is solution.
http://plnkr.co/edit/NvHXxt?p=preview
I have multiple timers on a page where each timer needs to be stopped and started at different events. Looking at examples/angularjs-multiple-timers.html i cannot find any hints on how to stop only a specific timer. Is it possible to pass an id to a timer to do that?
Hello!
Today i've updated my angular version to 1.2.0 and I notice that the timer directive is not working in the template.
Everything works fine in the directive, but the values are no updating int he html binds.
I already try some solutions and changes, but nothing that works.
Plunker in angular 1.2.0
http://plnkr.co/edit/YSpnUh1AbTR3EM2jh2pj?p=preview
Plunker in angular 1.2.0-rc3 (Working)
http://plnkr.co/edit/R3AyG6njAUVmoJeydU49?p=preview
index.html
has a lot of complicating factors that muddy the example (styling, etc). Can you build an even simpler one-page app showing the most basic usage?
Hi,
First of all I must salute you for providing this great directive. 👍
I am new to this angular and Git-Hub and learning it now. I am creating an app with countdown. during integration of timer module, I found an issue with interval. I cannot provide interval value other than 1000. So can I make this interval value to default 1000. so if interval value is wrong or not provided, it doesn't give any error.
Could you please include the license information for your code. I noticed the copyright but I'm unsure of the details. http://choosealicense.com/ could help. Thanks a bunch and the timer is awesome!
I am forced to do so:
$scope.$on('timer-add-cd-seconds', function (){
$timeout($scope.stopTimer, 5);
});
to stop the counter.
Maybe add a second parameter to the method?
$scope.$broadcast ('timer-add-cd-seconds', 1499, true); //on true - start counter
Hi Sidii,
great work on this lib.
I am trying to get multiple timers running using the timestamp from an array:
<div ng-repeat="category in categories">
{{category.name}}
<timer end-time="category.ts">{{days}}, {{hours}}, {{minutes}}, {{seconds}}.</timer>
</div>
This does not get the countdown running.
I'm kinda new to Angular so maybe I am missing some vital knowledge.
(I am trying to get this working using only Angular, without jQuery.)
Could you point me in the right direction on how to get this working?
Thanks!
Error: Non-assignable model expression: undefined (directive: timer)
got this always in FireFox.
Please refer to:
http://stackoverflow.com/questions/13594865/error-non-assignable-model-expression-undefined
This points to the problem. But I was not able to figure this out in your code.
Thanks for the great work with TIMER !
So this directive doesn't work with IE8. I'm trying to integrate this directive with some of our legacy software. Does anyone have some suggestions for IE compatibility?
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?
I'm making a simple web app for mobile devices that allows you to add timers with names and work types and then count how much time you spent on it. I'm trying to use with start-time attr to show user how much time passed since specific timer started:
<div class="timers list" ng-controller="TimersCtrl">
<ul>
<li ng-repeat="timer in timers">
<span>{{timer.projectName}}</span>
<span>({{timer.workType}})</span>
<timer start-time="timer.start">{{millis | date: "hh:mm:ss"}}</timer>
<span class="stop-timer button" ng-click="stopTimer(timer)">Stop</span>
</li>
</ul>
</div>
And the controller code:
timeboard.controller("TimersCtrl", ["$scope", "$http", "$rootScope", function($scope, $http, $rootScope) {
$scope.updateTimers = function(){
$http({method:"GET", url:"/api/v1/timers"}).success(function(data, status, headers, config) {
$rootScope.timers = data;
});
};
$scope.stopTimer = function(timer){
$http({method:"DELETE", url:("/api/v1/timers/" + timer._id)}).success(function(data, status, headers, config) {
$rootScope.timers = data;
});
};
$scope.updateTimers();
});
This controller only loads timers on page load and allows you to stop the timer
Timers are added from the other controller:
timeboard.controller("ProjectsCtrl", ["$scope", "$http", "$rootScope", "$timeout", function($scope, $http, $rootScope, $timeout) {
// some irrelevant code
$scope.startTimer = function(project){
$http({method:"POST", url: "/api/v1/timers", data: { PID: project._id, PName: project.name, worktype: project.workName } }).success(function(data, status, headers, config) {
project.usage = project.usage + 1;
$scope.updateWorkTypes();
$rootScope.timers = data;
});
};
// some irrelevant code
});
So the problem is that when I add new timer, it doesn't start to count time automatically, and this happens only in Chrome for Mobile (Desktop Chrome and its mobile emulation works fine), when I then refresh page or delete other timer or add a new one (this causes $rootScope timers to update with $http req) this one, that wasn't counting before, starts to count time
I'm sorry if i'm missing something very simple here, but please, let me know, if it isn't supposed to happen
EDIT: and of course let me know if you need some additional info
Hi Siddique,
Does your module allows for multiple timers running and/or stopping independently?
If not, are you planning on implementing this feature?
Thanks,
Manu
Hallo, when I put expression in end-date eg. end-date="someModel" it don't work while {{someModel}} work beside element. Where is problem, am I doing something wrong?
This example:
{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.
renders into:
hours, minutes, seconds.
I've modified my version of timer to offer events for 'end' and 'resume', as I needed these in my application. see https://github.com/alexandrosm/worldmap/blob/master/app/scripts/controllers/main.coffee for the elegant code that enables.
In a perfect world I'd rename 'stop' to 'pause', but I've left it there for backwards compatibility.
Are you interested in me pushing the 'end' and 'resume' events?
See https://github.com/alexandrosm/worldmap/blob/master/app/scripts/vendor/angular-timer/angular-timer.js for the version running on worldmap.io
Hi,
for 0 second, timer displays 0 seconds. Check it out on following plunker preview.
http://plnkr.co/edit/JsgCENsIVnCSurI7xqtU?p=preview
Can I change it. for '0' or '1' it would be display 'second' otherwise 'seconds'
Regards,
Each time I do a variation of a timer, I'm typically writing excess to determine what percent of my timer has run.
Anyway we could get something like <timer start-time="" end-time="">{{percent}}</timer>
?
Hello!
Thank you for your great work! I really like it!
I am using it as a count down timer to show that the event registration can start.
To follow the MVC pattern I am setting up some "dates" in the page controller and do some logic related to it, but unfortunately I am unable to pass my $scope.end-time
variable to your directive <time end-time="{{end-time}}"
...
Do you have any suggestions how to achieve it?
Thank you very much!
Best regards,
Andrej
Here's my code
<timer interval="1000" countdown="100">{{minutes}}:{{seconds}}</timer>
this is the printed output once the countdown timer has ended
0:0
I noticed that a couple of times during the countdown it lacked a 0 as well
e.g
1:1
should be
1:01
I'm trying to implement the countdown timer. When it hits zero it jumps back to the start time and begins counting in the opposite direction ie. ++ instead of --
Any hints to the problem would be helpful.
Thanks.
It will be nice to have a bower support for this project.
If anyone wants to, I can fork the project and create the bower configuration for this.
Hi,
Is there a way to change the "countdown" attribute from the AngularJS controller?
I tried something like this:
index.html
<timer interval="1000" countdown="{{timerTime}}">{{seconds}}</timer>
controller.js
controller('WorkoutCtrl', ['$scope', function($scope) {
$scope.timerTime = 15;
...
}]);
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!
Hi, I want to put the timer value from my db, so that's why I am making a ajax call and the response will replace the value of the timer. but its not working, here is my code:
<timer start-time="startTime" interval="100" countdown="students.countdown"> <strong>{{hours}} hours, {{minutes}} minutes, {{seconds}} second</strong> </timer>
dashboardFactory.getTimerTime().then(function(response) { $scope.startTime = response.time; });
Much like node_modules
, this is bloat which will get copied over every time someone installs the package but isn't actually used. The Bower homepage recommends checking in dependencies only "If you aren't authoring a package that is intended to be consumed by others."
At the very least, the bower_components directory could be added to the ignore
array in bower.json
, which would allow you to keep the dependencies "locked" in the repo without getting copied over to every consumer of this package.
What do you think?
awesome timer, but it is not working in IE8 and below browser, please help me out.
Hi,
I see the other two issues are related with same topic. I read them, but it´s not clear to me.
I need to set the end-time attribute dinamically from a model (coming from REST API). I don´t want to go to a controller, because I need to apply it to every element in an array (inside a ng-repeat).
{{hours}}:{{minutes}}:{{seconds}}
Is it possible to do it?
Thanks,
Roberto.
Hi there, great job on this timer btw.
Just wanted to let you know that I am getting a non-assignable error (code from the examples) in my console (Chrome - OS X) when using the countdown timer : {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}
Error: [$compile:nonassign] Expression '10041' used with directive 'timer' is non-assignable!
Tried in using this plunkr and getting a similar error as well : http://plnkr.co/edit/a6bV3x?p=preview
Error: [$compile:nonassign] http://errors.angularjs.org/undefined/$compile/nonassign?p0=300&p1=timer
at Error (native)
at http://siddii.github.io/angular-timer/bower_components/angular/angular.min.js:6:453
at p (http://siddii.github.io/angular-timer/bower_components/angular/angular.min.js:46:42)
at Object. (http://siddii.github.io/angular-timer/bower_components/angular/angular.min.js:46:141)
at h.$digest (http://siddii.github.io/angular-timer/bower_components/angular/angular.min.js:103:284)
at http://siddii.github.io/angular-timer/dist/angular-timer.min.js:8:3948
When I add seconds to the timer:
$scope.$broadcast 'timer-add-cd-seconds', ellapsedSeconds
and immediately attempt to stop it:
$scope.$broadcast 'timer-clear'
it seizes to do so. Timer continues ticking even after timer-clear
event is triggered.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.