AngularJS 1.x如何获取当前元素？替代jQuery的$(this)方法

嘿，我懂你遇到的困扰了——在jQuery里用$(this)轻松获取当前元素，但到AngularJS 1.x里尝试angular.element(this)却没效果对吧？咱们一步步来解决这个问题。

为什么angular.element(this)不生效？ #

在AngularJS的控制器函数里，this的上下文不是触发事件的DOM元素，它指向的是控制器实例或者$scope（取决于你的写法），所以直接用this肯定拿不到你想要的元素。

正确的做法：利用$event参数 #

你已经在ng-change指令里传入了$event参数，这是正确的方向！事件对象里的target（或currentTarget）就是触发事件的DOM元素，我们只需要把它传给angular.element，就能包装成AngularJS支持的jqLite（或jQuery）对象。

修改后的完整代码 #

<html>
<head>
<style>
.error{ color:red; }
</style>
</head>
<body>
<div ng-app="" ng-controller="eventController">
<h2>AngularJS $event example</h2>
<input type="text" ng-change="handleChange($event)" ng-model="test" value="My Text" class="testtt" >
</div>
<script>
function eventController($scope) {
  $scope.handleChange = function(event) {
    // 用angular.element包装事件触发的DOM元素
    var currentElem = angular.element(event.target);
    // 获取类名
    var classname = currentElem.attr('class');
    console.log(classname); // 输出 "testtt"
    
    // 也可以直接操作元素，比如添加error类
    // currentElem.addClass('error');
  }
}
</script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

额外说明 #

• 如果你的页面已经引入了jQuery，angular.element本质上就是jQuery的别名，所有jQuery的DOM操作方法都能直接用；
• 如果没引入jQuery，AngularJS会使用自带的jqLite，它支持大部分常用的DOM操作方法（比如addClass、attr、find等）。

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