Change "countdown" attribute from AngularJS controller? #21

jasonshah · 2013-09-15T12:49:08Z

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!

The text was updated successfully, but these errors were encountered:

siddii · 2013-09-18T13:40:20Z

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>

jasonshah · 2013-09-18T13:59:34Z

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.

362E · 2014-03-14T12:43:22Z

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.

<div ng-controller="MyAppController">
    <timer interval="100" countdown="countdownVal1"/>
    <timer interval="100" countdown="countdownVal2"/>
</div>

and my object will have the structure
[{countdownval1:time1...},{countdownval2:time2...}...]

siddii · 2014-03-14T14:59:26Z

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>

joelsalisbury · 2014-06-18T00:44:43Z

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!

siddii · 2014-06-18T00:47:20Z

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?

joelsalisbury · 2014-06-18T01:09:20Z

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!

kaplievabell · 2014-08-07T20:25:53Z

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',
[
'$scope', '$rootScope', '$http', 'webSocketService', '$filter',
function($scope, $rootScope, $http, webSocketService, $filter) {
$http.defaults.useXDomain = true;

            var data = {};

            $scope.myCountdown = 45;
            $scope.myAutoStart = false;

            webSocketService.getData();

            $rootScope.$on('broadcast', function() {
                data = webSocketService.message;
                $scope.tournament = data;
                $scope.eventState = data.event.eventState;

                $scope.lastComd = $scope.eventState.lastCommand;

                $scope.$watch('lastComd', function() {
                    if ($scope.lastComd === '1') {
                        $scope.$broadcast('timer-start');
                    }
                    else if ($scope.lastComd === '2') {
                        $scope.$broadcast('timer-stop');
                       // I thought this would resent countdown but it doesnt.
                        $scope.myCountdown = 45;
                        $scope.myAutoStart = false;
                    }
                });
            });
        }]);

:{{countdown}}

siddii · 2014-08-07T20:32:30Z

No, it won't. You probably need to re-init the directive using $compile. Kinda like whats done here.. http://plnkr.co/edit/SCAznyak4Sul0WDG5oMC?p=preview

The problem is we don't have a proper reset for countdown until then, you should do something like that.

kaplievabell · 2014-08-07T20:38:41Z

Thank you

zeeshanjan82 · 2014-10-30T16:13:32Z

Thanks @siddii I tried your solution to refresh the counter but its not working. I have created a plunkr
http://plnkr.co/edit/Lat9ig?p=preview
I am not able to refresh the counter once set I even tried @jasonshah solution which also does not work. Why i am not able to $apply on the value and I get the error $digest under progress?

zeeshanjan82 · 2014-10-31T14:35:26Z

Done. Found this line of code from the source code which really helped:

      $scope.$broadcast('timer-set-countdown', 60);

siddii · 2014-10-31T15:24:11Z

Cool.. I am glad you found a fix :)

mattkrebs · 2015-03-26T15:12:13Z

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!

rahmanict · 2015-08-12T10:53:31Z

is it your js or github?

samoeba · 2015-10-27T15:50:05Z

@zeeshanjan82 @siddii has this line of code gone away? $scope.$broadcast('timer-set-countdown', 60); I ran into the code below in the source code and I'm wondering what it does. How is it invoked?

$scope.$on('timer-set-countdown', function (e, countdown) {
    $scope.countdown = countdown;
});

OlympicLarry · 2016-07-05T19:54:10Z

var value = 1800;
$scope.$broadcast('timer-set-countdown-seconds', value);

meShakti · 2016-07-08T09:31:28Z

I am having the same issues as @mattkrebs

HeenaOberoi · 2016-08-02T06:32:53Z

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,
$rootScope.OverAllTimeRemaining = 4000;//Added arbitary value which ideally is dynamic-This time is in seconds

The timer is running fine yet skips seconds only in IE.

Any solution???

jasonshah closed this as completed Sep 18, 2013

siddii mentioned this issue Oct 3, 2013

Dynamically binding countdown value #23

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change "countdown" attribute from AngularJS controller? #21

Change "countdown" attribute from AngularJS controller? #21

jasonshah commented Sep 15, 2013

siddii commented Sep 18, 2013

jasonshah commented Sep 18, 2013

362E commented Mar 14, 2014

siddii commented Mar 14, 2014

joelsalisbury commented Jun 18, 2014

siddii commented Jun 18, 2014

joelsalisbury commented Jun 18, 2014

kaplievabell commented Aug 7, 2014

siddii commented Aug 7, 2014

kaplievabell commented Aug 7, 2014

zeeshanjan82 commented Oct 30, 2014

zeeshanjan82 commented Oct 31, 2014

siddii commented Oct 31, 2014

mattkrebs commented Mar 26, 2015

rahmanict commented Aug 12, 2015

samoeba commented Oct 27, 2015

OlympicLarry commented Jul 5, 2016

meShakti commented Jul 8, 2016

HeenaOberoi commented Aug 2, 2016

Change "countdown" attribute from AngularJS controller? #21

Change "countdown" attribute from AngularJS controller? #21

Comments

jasonshah commented Sep 15, 2013

siddii commented Sep 18, 2013

jasonshah commented Sep 18, 2013

362E commented Mar 14, 2014

siddii commented Mar 14, 2014

joelsalisbury commented Jun 18, 2014

siddii commented Jun 18, 2014

joelsalisbury commented Jun 18, 2014

kaplievabell commented Aug 7, 2014

siddii commented Aug 7, 2014

kaplievabell commented Aug 7, 2014

zeeshanjan82 commented Oct 30, 2014

zeeshanjan82 commented Oct 31, 2014

siddii commented Oct 31, 2014

mattkrebs commented Mar 26, 2015

rahmanict commented Aug 12, 2015

samoeba commented Oct 27, 2015

OlympicLarry commented Jul 5, 2016

meShakti commented Jul 8, 2016

HeenaOberoi commented Aug 2, 2016