angularjs multiple countdown

Question

Im in need to make a countdown like this:

<div  class="countdown" countdown="1482400417">00:10:02</div>

where the countdown attribute is the time when its finished. the difference is showed in hours:minutes:secs , and it updates each second.

How would i do this in angularjs, when i have multiple countdowns like that?

I did a little digging, and i found something that did something simular, but i couldnt understand the code. So ill post the code i found:

Travian.Directive.countdown = function(a) {
    return function(c, b, l) {
        function g() {
            if ("undefined" != typeof a.K()) {
                h = b.attr("countdown");
                var c = h - a.K();
                if (0 > c || isNaN(c)) {
                    return Travian.tick.unbind(e), e = null, b.text(
                        la(0)), !1
                }
                var g = "";
                l.showDaysLimit && c >= l.showDaysLimit ? (c = Math
                    .round(c / 86400), c == f ? g = m : (g =
                        Travian.translate("ForDays", {
                            x: c
                        }), f = c)) : g = la(c, l.countdownShort &&
                    c < l.countdownShort);
                m != g && (m = g, b.text(g))
            }
        }
        var h, e = null,
            m = "",
            f = 0;
        l.showDaysLimit && c.$on("newTranslation", function() {
            f = 0
        });
        l.$observe("countdown", function(a) {
            "undefined" != typeof a && null == e && (e =
                Travian.tick.bind(g))
        });
        b.bind("$destroy", function() {
            Travian.tick.unbind(e)
        })
    }
};



  Travian.tick = new function() {
    var a = {};
    (function B() {
      window.setTimeout(B, 100);
      var b = {}, c;
      for(c in a) {
        a.hasOwnProperty(c) && "function" === typeof a[c] && (a[c](), b[c] = a[c])
      }
      a = b
    })();
    return{bind:function(b, c) {
      "function" === typeof b && (c = b, b = na("tick"));
      c();
      a[b] = c;
      return b
    }, unbind:function(b) {
      a[b] = null
    }}
  };

Forcent Vintier · Accepted Answer · 2016-08-30 13:54:08Z

1

Not exactly what you asked for, but that should get you started.

You can create a directive that has and displays a countdown value. This value is updated every second using $interval service.

myApp.directive('countdown', function() {
    return {
        restrict: 'E',
        template: '<div>{{countdownVal}}</div>',
        scope: {
            initVal: '='
        },
        controller: function($scope, $interval) {
                $scope.countdownVal = $scope.initVal;

            $interval(function () {
                    if ($scope.countdownVal > 0) {}
                        $scope.countdownVal--;
                }
            }, 1000);
        }
    }
});

Having this has a starting point, you can tweak this code to add formatting, and to make this directive usable as an attribute instead of as a element.

See a concrete example in this JSFiddle.

Also, keep in mind that you should destroy the interval when you are done with it. From the docs:

Note: Intervals created by this service must be explicitly destroyed when you are finished with them. In particular they are not automatically destroyed when a controller's scope or a directive's element are destroyed. You should take this into consideration and make sure to always cancel the interval at the appropriate moment. See the example below for more details on how and when to do this.

edited Aug 30, 2016 at 13:54

answered Aug 30, 2016 at 12:46

Forcent Vintier

1591 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Forcent Vintier Over a year ago

Sorry I made an error in the JSFiddle. It should work now.

maria Over a year ago

thanks! will take a look at it now. do you know why it wont show the format? jsfiddle.net/4p4182mb/4

Forcent Vintier Over a year ago

No problem! It won't work because you did formatting outside of the interval function. You need to do formatting every time the countdown is updated. Keep in mind that this might cause performance as it's executed very often. jsfiddle.net/4p4182mb/6

maria Over a year ago

thanks @forcent vintier , do you have time to chat? :)

Forcent Vintier Over a year ago

Yes sure. Also, don't forget to destroy your interval (see edit in post).

|

Collectives™ on Stack Overflow

angularjs multiple countdown

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related