Jquery 从AngularJS中的按钮获取数据属性

我使用

Angularjs

进行

pagination

loop button id=

remove\u imslide

，然后我想从按钮中获取

data-img\u id

的值，以便在单击按钮时在

Jquery

函数中提醒消息，但它不起作用

在我看来，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>

标题
@{{slide.title}}
描述
@{{slide.detail}}

我的Jquery脚本：

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

$（文档）.ready（函数（）{
$（“#删除幻灯片”）。单击（函数（）{
警报（此.data（'img_id'））；
});
});

---

有解决方案吗？

您必须将Js代码写入组件的onInit方法中

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

---

不要将AngularJS与jQuery混合使用。请仔细阅读本文-。如前所述，jQuery事件没有绑定到AngularJS循环生成的元素上。您应该将jQuery从应用程序中踢出

您可以通过使用。这将是处理此类事件的正确方法-：

看法

---

尝试

警报（$（this）.data（'img_id'）

@linktoahref它不起作用我认为它似乎是jquery事件在AngularJS的按钮循环中不起作用为什么你不简单地使用按钮的点击事件并将id传递给它？：ng click='hadleClick（slide.id）'还有一个问题，如何在模式中将它传递给控件？？

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

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