Angularjs ng-click: 이 데이터를 얻는 방법

Angularjs ng-click: 이 데이터를 얻는 방법

리스트에 각이 진 아이템이 있다고 칩시다.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');

            }
         };

올바른 해결책은 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
};

데모: 바이올린

클릭된 링크 태그 속성에 액세스하려면

jQuery에서는

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

위의 링크를 클릭하면 다음과 같이 처리됩니다.

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

jQuery 데모코드: findle

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 데모코드: findle

또한 다음을 사용하여 각도로 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)"

다른 이유로 아직 요소에 액세스 할 필요가 있는 경우는, 다음과 같이 합니다.

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

언급URL : https://stackoverflow.com/questions/20814420/angularjs-ng-click-how-to-get-this-data