jquery - Angularjs ng-click: cómo obtener `this` datos?

onclick jquery-1.9

Question

Supongamos que tengo este elemento en la lista con el evento angular ng-click .

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

¿Cómo puedo obtener los datos / información si this así?

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

            }
         };

Answer 1

La solución correcta será pasar el ID como parámetro a la función de eliminación, como

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

entonces

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

        }
     };

Esto no debería hacerse , solo para demostrar

Dentro de ng-click puede obtener el evento utilizando $event , por lo

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

entonces

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

Demostración: Fiddle

Answer 2

Para acceder a los atributos de etiqueta de enlace clicados

En jQuery ,

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

al hacer clic en el enlace de arriba se maneja como

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

Código de demostración para jQuery: fiddle

En Angularjs ,

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

al hacer clic en el enlace de arriba se maneja como

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

Código de demostración para Angularjs: fiddle

Answer 3

Si por alguna otra razón, aún necesita acceder al elemento, así es como lo hice:

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

y en el controlador

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

Answer 4

También puede acceder a los datos del evento para Jquery en angular usando:

  $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;
    }, {});
  }
};

Su elemento cliqueado debe contener un ng-clic como este

ng-click="myClickedEvent($event)"