AngularJS Directive scope binding issue in ng-repeat

Question

am having a directive which is a stopwatch. It is placed under ng-repeat so the user can create as many stopwatches he needs. All these stopwatch has their own play/pause and stop button. The issue am facing is when the user starts the first stopwatch all the other watches starts running, but when starting from the last watch it works fine. What am I doing wrong here.Find the plunker

my link function: Complete working code is in plunker

  link: function(scope, element, attrs, ctrl) {

  var start_button = angular.element(document.querySelector('.play'));
  var pause_button = angular.element(document.querySelector('.pause'));
  var stop_button = angular.element(document.querySelector('.stop'));

  start_button.on('click', ctrl.start);
  pause_button.on('click', ctrl.pause);
  stop_button.on('click', ctrl.stop);
  scope.$on('$destroy', function () {
    start_button.off('click', ctrl.start);
    pause_button.off('click', ctrl.pause);
    stop_button.off('click', ctrl.stop);
  });

},

rmuller · Accepted Answer · 2015-03-30 07:22:48Z

2

I see that in your directive template you have an ng-click so this code can be removed

 var start_button = angular.element(document.querySelector('.play'));
  var pause_button = angular.element(document.querySelector('.pause'));
  var stop_button = angular.element(document.querySelector('.stop'));

  start_button.on('click', ctrl.start);
  pause_button.on('click', ctrl.pause);
  stop_button.on('click', ctrl.stop);
  scope.$on('$destroy', function () {
    start_button.off('click', ctrl.start);
    pause_button.off('click', ctrl.pause);
    stop_button.off('click', ctrl.stop);
  });

and then it works :)

working plunkr

answered Mar 30, 2015 at 7:22

rmuller

1,83712 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Directive scope binding issue in ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related