使用指令禁用ng-repeat生成的数字输入框鼠标滚轮问题

我明白你现在的困境：想用指令禁用ng-repeat生成的number input滚轮功能，虽然用ng-attr-id动态分配ID时控制台能打出正确ID，但HTML里的ID可能没按预期渲染，或者就算ID对了，绑定事件也没生效？其实你完全不用绕ID这个弯子，AngularJS的指令本身就可以直接操作当前元素，比通过ID查找靠谱多了。

推荐方案：直接给input绑定指令（无需ID） #

这种方法最简洁，也符合AngularJS的设计思路——指令直接作用在目标元素上，不需要额外的ID来定位。

1. 定义自定义指令

angular.module('你的应用模块名').directive('disableWheel', function() {
  return {
    restrict: 'A', // 作为属性使用
    link: function(scope, element) {
      // 监听鼠标滚轮事件，阻止默认行为
      element.on('wheel', function(e) {
        e.preventDefault();
      });

      // 可选：页面销毁时移除事件监听，避免内存泄漏
      scope.$on('$destroy', function() {
        element.off('wheel');
      });
    }
  };
});

2. 在ng-repeat中使用指令

直接把指令属性加到input上就行，ng-repeat生成的每个输入框都会自动应用这个指令：

<div ng-repeat="item in 你的数据列表">
  <input type="number" ng-attr-id="input-{{$index}}" disable-wheel>
</div>

为什么之前的ID方法容易出问题？ #

1. DOM渲染时机问题：指令执行时，ng-repeat可能还没完成DOM渲染，这时候用ID查找元素大概率找不到。
2. ID重复风险：如果$index处理不当（比如数据更新导致索引变化），可能出现重复ID，这会导致事件绑定混乱。
3. 不符合AngularJS最佳实践：指令的设计初衷就是让你直接操作当前关联的元素，没必要多此一举用ID去定位。

如果你坚持要用ID的方式（不推荐） #

如果一定要基于ID实现，那得确保DOM渲染完成后再绑定事件，可以用$timeout延迟执行：

指令代码：

angular.module('你的应用模块名').directive('disableWheelById', function($timeout) {
  return {
    restrict: 'A',
    scope: {
      inputId: '@' // 接收传入的ID
    },
    link: function(scope) {
      $timeout(function() {
        const inputEl = document.getElementById(scope.inputId);
        if (inputEl) {
          inputEl.addEventListener('wheel', function(e) {
            e.preventDefault();
          });
        }
      });
    }
  };
});

HTML使用：

<div ng-repeat="item in 你的数据列表">
  <input type="number" ng-attr-id="input-{{$index}}" disable-wheel-by-id input-id="input-{{$index}}">
</div>

但还是强烈推荐第一种方法，省心又不容易出错~

内容的提问来源于stack exchange，提问作者monkeyWithAMachinegun