如何使用 ng-click 獲取 DOM 元素

Question

我有一些元素，如：

<button ng-click="weirdFunction()">Pretty Button</button>

和控制器中的功能：

$scope.weirdFunction = function(element) {
 console.log(element);
}

在控制台日志中，我想接收這個 DOM 元素。 我試圖通過幾種方式做到這一點：

1. <button ng-click="weirdFunction()" ng-model="button">Pretty Button</button>

   $scope.weirdFunction = function() { console.log($scope.button); }

2. <button ng-click="weirdFunction(button)" ng-model="button">Pretty Button</button> $scope.weirdFunction = function(elem) { console.log(elem); } $scope.weirdFunction = function(elem) { console.log(elem); }

3. <button ng-click="weirdFunction($element)">Pretty Button</button> $scope.weirdFunction = function(elem) { console.log(elem); } $scope.weirdFunction = function(elem) { console.log(elem); }但所有嘗試均失敗。 我錯在哪里？ 如何獲取點擊的元素？

Answer 1

請嘗試以下代碼段。

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.weirdFunction = function(element) { console.log(element); } });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="weirdFunction($event.currentTarget)">Pretty Button</button> </div>

Answer 2

將 $event 對象傳遞給奇怪的函數。 $event.target 給出觸發點擊的元素。

<button ng-click="weirdFunction($event)">Pretty Button</button>

Answer 3

我現在有這個問題，並通過創建這個函數結束

getElement($event){
    return $event.target || $event.srcElement || $event.toElement || $event.path[0];
};

在 CanIUse 它適用於任何地方。