AngularJS ng-repeat 中的指令范围绑定问题

Question

我有一个秒表指令。它位于 ng-repeat 下，因此用户可以创建他需要的任意数量的秒表。所有这些秒表都有自己的 play/pause 和停止按钮。我面临的问题是，当用户启动第一个秒表时，所有其他手表都会启动运行，但是当从最后一个手表开始时，它工作正常。我在这里做错了什么。Find the plunker

我的 link 功能：完整的工作代码在 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);
  });

},

Answer 1

我看到在您的指令模板中有一个 ng-click，因此可以删除此代码

 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);
  });

然后就可以了:)

working plunkr

AngularJS ng-repeat 中的指令范围绑定问题

AngularJS Directive scope binding issue in ng-repeat

javascript

angularjs

angularjs-directive