Question

我将Angularjs用于pagination循环按钮ID = remove_imslide，然后我希望从data-img_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>

我的Jquery脚本：

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

这些解决方案？

Answer 1

不要将AngularJS与jQuery混合使用。请仔细阅读本文 - "Thinking in AngularJS" if I have a jQuery background?。正如您已经说过的，您的jQuery事件没有绑定在AngularJS循环生成的元素上。你应该从你的应用程序中踢出jQuery。

您可以使用directive以AnguarlJS方式实现此目的。这将是处理此类事件的正确方法 - demo fiddle ：

视图

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

AngularJS应用程序

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

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

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

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

2 个答案:

视图

AngularJS应用程序