Angular directive callback isn't working

Question

I'm sure I'm making a mistake but I can't find it. Html:

<html ng-app="countdown">
  <body>
    <div class="container" ng-controller="cc">
      {{status}}<br>
      <countdown duration="3" timeoutCallback="cbck"></countdown>
    </div>
  </body>
</html>

That's the javascript code:

var app = angular.module("countdown",[]);

app.controller('cc', function ($scope){
  $scope.status = 'countdown started ';
  $scope.cbck = function () {
    $scope.status = 'countdown finished';
  }
});
app.directive('countdown', ['$interval', function ($interval) {
  return {
    scope: {
      timer: '=duration',
      callback: '&timeoutCallback'
    },
    restrict: 'E',
    template: '<span>{{minutes}}:{{seconds}}</span>',
    link: function (scope, element, attrs){

      scope.ipromise = $interval(function() {
        var minutes, seconds;
        minutes = parseInt(scope.timer / 60, 10)
        seconds = parseInt(scope.timer % 60, 10);
        scope.minutes = minutes < 10 ? "0" + minutes : minutes;
        scope.seconds = seconds < 10 ? "0" + seconds : seconds;
        if(scope.timer > 0){
             scope.timer--;   
        }else{
          scope.callback();
          $interval.cancel(scope.ipromise);
        }
      }, 1000);
    }
  };
}]);

I can't find what I'm doing wrong, I developed another directives with callbacks and those work well.

Here the code: http://codepen.io/madridserginho/pen/JdWNEK

paul · Accepted Answer · 2015-06-03 08:45:27Z

1

What @Arek said...

also use: callback: '=timeoutCallback'

rather than callback: '&timeoutCallback'

http://codepen.io/anon/pen/PqpmgX

answered Jun 3, 2015 at 8:45

paul

22.1k1 gold badge56 silver badges54 bronze badges

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

1 Comment

rzelek Over a year ago

Good catch, I didn't notice &, which gives undesired complexity in calling function binded that way.

rzelek · Accepted Answer · 2015-06-03 08:37:25Z

0

<html ng-app="countdown">
  <body>
    <div class="container" ng-controller="cc">
      {{status}}<br>
      <countdown duration="3" timeout-callback="cbck"></countdown>
    </div>
  </body>
</html>

Camel case attributes from directives (like timeoutCallback) are translated to dash case in view (like timeout-callback), that is why binding does not work.

answered Jun 3, 2015 at 8:37

rzelek

4,0331 gold badge36 silver badges36 bronze badges

Collectives™ on Stack Overflow

Angular directive callback isn't working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related