AngularJS中如何传递HTML元素至函数？解决this关键字混淆问题

架构老林

2026-5-22

解决AngularJS中传递HTML元素到自定义函数的问题

嘿，我懂你遇到的困扰——纯JS里用this传DOM元素挺顺畅，但到AngularJS里就失灵了，这是因为Angular悄悄改变了this的指向。别慌，给你两种简单靠谱的解决办法：

问题根源

在AngularJS的指令（比如ng-click、ng-blur这类）里，this绑定的是当前的作用域（$scope），而不是触发事件的DOM元素。所以你之前的写法拿到的根本不是目标元素，自然调用不了value和focus()这些方法。

方法一：通过`$event`传递DOM元素

这是最直接的方案，Angular内置了$event对象，它包含了事件的所有信息，包括触发事件的DOM元素：

在HTML调用函数时传入$event：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" value="测试文本" ng-click="MyFunction($event)">
</div>

在控制器函数里，通过$event.target提取DOM元素：

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.MyFunction = function(event) {
    // 获取触发事件的原生DOM元素
    const targetElement = event.target;
    alert(targetElement.value);
    targetElement.focus();
  }
});

方法二：用Angular封装的元素操作（可选）

如果想更贴合Angular的风格，可以用angular.element()把原生DOM元素包装成Angular的jqLite对象，还能用上Angular提供的DOM操作方法：

$scope.MyFunction = function(event) {
  const angularElement = angular.element(event.target);
  alert(angularElement.val()); // 用Angular的val()方法取值
  angularElement[0].focus(); // 原生focus()需要取[0]拿到原生元素
}