Angularjs ng-click:如何获取“这个”数据?

Let say I have this item in the list with angular ng-click event.

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

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

How can I get the data/ info if this then?

如果这样的话，我怎样才能得到数据/信息呢?

        $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');

            }
         };

4 个解决方案

#1

The right solution will be is to pass the id as an parameter to the delete function like

正确的解决方案是将id作为参数传递给delete函数

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

then

然后

    $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');

        }
     };

---

This should not be done, but just to demonstrate

这是不应该做的，只是为了演示一下

Inside ng-click you can get the event using $event, so

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

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

then

然后

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

Demo: Fiddle

演示:小提琴

#2

You can also access the event data for Jquery in angular using:

您也可以使用以下的角度访问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;
    }, {});
  }
};

Your clicked element should contain an ng-click like this

单击的元素应该包含这样的ng-click

ng-click="myClickedEvent($event)"

#3

To access clicked link tag attributes

访问单击的链接标签属性

In jQuery,

在jQuery中,

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

on click of above link is handled as

点击上面的链接将被处理为

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

Demo code for jQuery : fiddle

jQuery演示代码:fiddle

In Angularjs,

在Angularjs,

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

on click of above link is handled as

点击上面的链接将被处理为

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

Demo code for Angularjs : fiddle

Angularjs的演示代码:fiddle

#4

If for some other reason, you still need to access the element here's how I did it :

如果出于其他原因，你仍然需要访问元素，我是这样做的:

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

and in the controller

和控制器

$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
};