AngularJS无法使用$event时，如何在ng-change获取ng-repeat的textarea目标元素？

好问题！在AngularJS的ng-repeat场景下不能用$event的话，有几种靠谱的方法可以获取对应的textarea元素，我给你整理一下：

方法1：传递$index并通过索引定位DOM元素 #

你可以把当前循环的$index传给ng-change的回调函数，然后在控制器里通过索引来定位对应的textarea元素。这种方法简单直接，适合不需要复杂DOM操作的场景。

模板代码： #

<div ng-repeat="item in $ctrl.items track by $index">
  <textarea ng-change="$ctrl.changed($index)" ng-model="item.content"></textarea>
</div>

控制器代码： #

// 假设你的控制器类是这样的
class YourController {
  constructor() {
    this.items = [/* 你的数据数组 */];
  }

  changed(index) {
    // 用原生DOM API获取元素，注意选择器要匹配你的实际结构
    const textarea = document.querySelectorAll('textarea')[index];
    // 如果你引入了jQuery或者用AngularJS自带的jqLite，也可以这样：
    // const textarea = angular.element(document.querySelectorAll('textarea')[index]);
    
    // 现在你可以操作这个元素了，比如获取内容或者修改样式
    console.log(textarea.value);
  }
}

angular.module('yourApp').controller('YourController', YourController);

方法2：给textarea绑定唯一ID，通过ID获取元素 #

给每个textarea生成一个唯一的ID（比如结合$index），然后在回调里通过ID直接获取目标元素，这种方法定位更精准，不会因为DOM结构变化导致索引失效。

模板代码： #

<div ng-repeat="item in $ctrl.items track by $index">
  <textarea id="textarea-{{$index}}" ng-change="$ctrl.changed($index)" ng-model="item.content"></textarea>
</div>

控制器代码： #

changed(index) {
  const textarea = document.getElementById(`textarea-${index}`);
  // 或者用jqLite：
  // const textarea = angular.element(`#textarea-${index}`);
  
  console.log(textarea.value);
}

方法3：自定义指令传递元素（最AngularJS风格的方式） #

如果你的场景需要频繁操作DOM，推荐用自定义指令来封装逻辑，把元素直接传递给控制器的回调。这种方法更符合AngularJS的设计理念，也更灵活。

自定义指令代码： #

angular.module('yourApp').directive('passElementOnChange', () => {
  return {
    scope: {
      // 绑定控制器的回调函数
      onChange: '&passElementOnChange'
    },
    link(scope, element) {
      // 监听textarea的change事件
      element.on('change', () => {
        // 把当前元素（jqLite对象）传给控制器的回调
        scope.$apply(() => {
          scope.onChange({ $element: element });
        });
      });
    }
  };
});

模板代码： #

<div ng-repeat="item in $ctrl.items">
  <textarea pass-element-on-change="$ctrl.changed($element)" ng-model="item.content"></textarea>
</div>

控制器代码： #

changed($element) {
  // $element是AngularJS的jqLite对象，可以直接调用jqLite方法
  console.log($element.val());
  // 比如修改样式：
  $element.css('border-color', 'red');
}

额外建议：优先用数据驱动，避免直接操作DOM #

其实如果你的需求只是获取textarea的内容，完全不需要操作DOM！AngularJS是数据驱动框架，只要给textarea绑定ng-model，直接在回调里使用绑定的数据即可：

模板代码： #

<div ng-repeat="item in $ctrl.items">
  <textarea ng-change="$ctrl.changed(item)" ng-model="item.content"></textarea>
</div>

控制器代码： #

changed(item) {
  // 直接使用item.content就能拿到当前textarea的最新值
  console.log('当前内容：', item.content);
}

这种方法既简洁又符合AngularJS的设计思想，能避免很多DOM操作带来的问题，非常推荐优先使用！

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