Get data attribute from button in AngularJS

Question

I use Angularjs for pagination loop button id=remove_imslide and then i want to get value of data-img_id from button to alert message in Jquery function on button click but it's not working.

In my view with Angularjs:

<div class="form-group" ng-app="angtable" ng-controller="imgslide">
    <table border="0">
        <tr dir-paginate="slide in slides|orderBy:sortKey:reverse|filter:search|itemsPerPage:itemsPerPage"
            current-page="currentPage">
            <td style="padding: 10px;border-color:lightgrey;">
                <table border="0" width="100%">                   
                    <tr>
                        <td style="padding-left: 10px;">
                            <label for="timesheetinput1" style="color: blue; font-weight: bold;">Title</label>
                                <div class="position-relative has-icon-left">
                                    @{{slide.title}}
                                </div>
                        </td>
                        <td rowspan="3" style="padding-left: 30px;width: 150px;">                           
                            <button type="button" class="btn btn-danger" id="remove_imslide" name="remove_imslide" data-img_id="@{{slide.id}}"><i
                                class="fa fa-trash-o" aria-hidden="true"></i>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 10px;">
                            <label for="timesheetinput1" style="color: blue;font-weight: bold;">Description</label>
                                <div class="position-relative has-icon-left">
                                    @{{slide.detail}}
                                </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

My Jquery Script:

 <script>
        $(document).ready(function () {
            $('#remove_imslide').click( function(){
                alert(this.data('img_id'));
            });
        });
    </script>

Any solution for these?

Answer 1

Don't ever mix AngularJS with jQuery. Please read this article carefully - "Thinking in AngularJS" if I have a jQuery background?. As you already said, your jQuery event is not binded on that AngularJS loop generated element. You should kick jQuery out of your application.

You can achieve this in the AnguarlJS way by using a directive. This would be the correct way to handle that kind of event - demo fiddle:

View

<div ng-controller="MyCtrl">
  <button my-directive data-img_id="hello world">My button directive</button>
</div>

AngularJS application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.name = 'Superhero';
});

myApp.directive('myDirective', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.on('click', function () {
          console.log(attrs.imgId);
        })
      }
    }
});

Answer 2

You have to write Js code in to onInit method of your component

onInit(){
   $('#remove_imslide').on('click',function(){
        alert($(this).data('img_id'));
   });
}