ngRepeat销毁scope时$destroy函数引用错误问题咨询

嘿，这个问题我之前踩过一模一样的坑——这绝对不是AngularJS的Bug，而是JavaScript里经典的闭包陷阱导致的！

问题根源 #

当你在循环里为每个新创建的scope绑定$destroy事件时，回调函数并没有“固定”住当前迭代的那个scope变量。因为用var声明的变量是函数级作用域（而非块级），所有循环里的回调函数都会共享同一个scope变量的引用。等循环结束后，这个变量会指向最后一次迭代的那个scope，所以不管你移除哪一项，触发$destroy时都会错误地引用最后那个scope。

解决方案 #

这里有几种靠谱的解决办法，你可以根据自己的代码场景选择：

1. 用立即执行函数表达式（IIFE）捕获当前scope

通过IIFE把当前迭代的scope作为参数传递进去，创建一个独立的作用域，让回调函数绑定到这个特定的scope上：

// 示例添加项的代码
$scope.addItem = function() {
  var newId = $scope.items.length + 1;
  var currentScope = $scope.$new();
  currentScope.id = newId;
  
  // 用IIFE锁定当前的scope
  (function(lockedScope) {
    lockedScope.$on('$destroy', function() {
      console.log('销毁的是ID为' + lockedScope.id + '的scope');
    });
  })(currentScope);
  
  $scope.items.push(currentScope);
};

2. 使用AngularJS的angular.forEach

AngularJS自带的forEach方法会在每次迭代时创建独立的函数作用域，天然避开闭包陷阱：

// 批量添加项的示例
$scope.batchAdd = function(count) {
  var startId = $scope.items.length + 1;
  var newItems = Array.from({length: count}, (_, i) => ({id: startId + i}));
  
  angular.forEach(newItems, function(item) {
    var currentScope = $scope.$new();
    currentScope.id = item.id;
    currentScope.$on('$destroy', function() {
      console.log('销毁的是ID为' + currentScope.id + '的scope');
    });
    $scope.items.push(currentScope);
  });
};

3. 用ES6的let声明变量（如果环境支持）

如果你的项目允许使用ES6+语法，用let代替var声明循环变量或scope，let会在每次循环迭代时创建新的绑定，自动解决闭包问题：

$scope.addItem = function() {
  let newId = $scope.items.length + 1;
  let currentScope = $scope.$new();
  currentScope.id = newId;
  
  currentScope.$on('$destroy', function() {
    console.log('销毁的是ID为' + currentScope.id + '的scope');
  });
  
  $scope.items.push(currentScope);
};

验证方法 #

修改完代码后，你可以：

• 点击添加按钮创建2个以上的项
• 移除中间的某一项（比如ID为2的项）
• 查看控制台输出，应该会显示“销毁的是ID为2的scope”，而不是最后一个项的ID，这就说明问题解决了。

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