Angularjs ng-click：如何获取`this`数据？

Posted 2023-02-19

【中文标题】Angularjs ng-click：如何获取`this`数据？

【英文标题】：Angularjs ng-click: how to get `this` data?

【发布时间】：2014-01-15 20:32:30

【问题描述】：

假设我在列表中有这个项目，带有角度 ng-click 事件。

<a data-id='102' ng-click='delete()'>Delete</a>

如果this 那么我如何获取数据/信息？

        $scope.delete = function() 

             var id = $(this).attr('data-id');
             console.log(id); // I want to get 102 as the result
             if (confirm('Are you sure to delete?')) 
                $('#contactsGrid tr[data-id="' + id + '"]').hide('slow');

            
         ;

【问题讨论】：

不知道为什么这会被否决。对于 AngularJS 方法的新手来说，这是一个有效的问题，并且预计 AngularJS 的新手会向 *** 寻求指导。

@ChristopherParker +1 更不用说与许多人相比，这是一个写得非常好的问题......！

我有同样的问题。我是 AngularJS 和 JQuery 的新手，它们之间的交互不是那么容易理解。

【参考方案1】：

正确的解决方案是将 id 作为参数传递给删除函数，例如

<a data-id='102' ng-click='delete(102)'>Delete</a>

然后

    $scope.delete = function(id) 
         console.log(id); // I want to get 102 as the result
         if (confirm('Are you sure to delete?')) 
            $('#contactsGrid tr[data-id="' + id + '"]').hide('slow');

        
     ;

---

不应该这样做，只是为了演示

在ng-click 中，您可以使用$event 获取事件，所以

<a data-id='102' ng-click='delete($event)'>Delete</a>

然后

$scope.delete = function (e) 
    var id = $(e.target).data('id');
    console.log(id); // I want to get 102 as the result
;

演示：Fiddle

【讨论】：

是的，最好独立于delete() 的名称来考虑它。碰巧来自点击，但在一般情况下不会。但请注意：大概这个 标记在某种 ng-repeat 中？如果是这样，则迭代项在范围内，并且可以通过 this 访问。

谢谢，我一直在寻找这个答案。但是为什么不使用 $event 呢？

凹凸。也很好奇为什么不使用 $event？

我正在使用您的解决方案。这对我来说很好。但是我很好奇您为什么要写“这不应该这样做，而只是为了演示。”。我很好奇为什么不应该使用 $event 解决方案。

如果我们相信这篇文章，由于 AngularJS 的概念，不应该这样做：link

【参考方案2】：

访问点击的链接标签属性

在jQuery中，

<a class='test' data-id='102' ng-click='delete(102)'>Delete</a>

点击以上链接被处理为

$('.test').click(function()
   console.log($(this).attr('data-id')); 
);

jQuery 演示代码：fiddle

在Angularjs中，

<a class='test' data-id='102' ng-click='delete($event)'>Delete</a>

点击以上链接被处理为

$scope.delete = function (e) 
    console.log($(e.currentTarget).attr("data-id")); 
 

Angularjs 的演示代码：fiddle

【讨论】：

你不会得到 $ 没有定义吗？

【参考方案3】：

您还可以使用 Angular 访问 Jquery 的事件数据：

  $scope.myClickedEvent = function(clickEvent) 
    $scope.clickEvent = simpleKeys(clickEvent);
    angular.element(clickEvent.currentTarget);
    console.log(angular.element(clickEvent.currentTarget).text());
   /*
   * return a copy of an object with only non-object keys
   * we need this to avoid circular references
   */
   function simpleKeys (original) 
    return Object.keys(original).reduce(function (obj, key) 
      obj[key] = typeof original[key] === 'object' ? ' ... ' : original[key];
      return obj;
    , );
  
;

你点击的元素应该包含一个像这样的 ng-click

ng-click="myClickedEvent($event)"

【参考方案4】：

如果出于其他原因，您仍然需要访问该元素，我就是这样做的：

<span ng-click="selectText($event)"></span>

在控制器中

$scope.selectText = function(event) 
  var element = event.currentTarget; // returns the span DOM Element
  // Now you can access its dataset just like in plain old JS
  // In my case it was for selecting the content of a tag on click anywhere on the tag
;