javascript - 从 Angular 中的jquery访问动态html对象id

Question

在我的 Angular 页面上，我有三个 Accordion 。每个加载一个组件 View ，其中包含一个动态生成的表。这意味着，我在整个页面上都有表一、表二和表三。每个表上方都有一个用于访问该表的 JQuery 部分。实际上，我是通过 css 类(例如 table.scrolling-table)查找表格来做到这一点的。

这适用于第一个表，因为代码只能找到页面上的第一个表(但我有三个不同的表)。每个表都有一个名为 dataTable_{{$ctrl.entry.id}} 的动态 ID。现在我想通过 JQuery 调用访问这个 id。如何在组件内的 JQuery 表中应用 danymic id？

Angular 组件 View

<table id="dataTable_{{$ctrl.entry.id}}" class="table scrolling-table">
    <tr>...</tr>
</table>
<script>
    bodyColumnWidth(){
        var $table = $('table.scrolling-table'); // this is actually
        var $table = $('#dataTable_' + entry.id); // i need something like this
    }

    headColumnWidth(){
        var $table = $('table.scrolling-table'); // this is actually
        var $table = $('#dataTable_' + entry.id); // i need something like this
    }

    $(function() {
        bodyColumnWidth();
        headColumnWidth();
    });

    $(window).resize(function() {
        bodyColumnWidth();
        headColumnWidth();
    }).resize();
</script>

Answer 1

您可以创建一个绑定(bind)为属性的 Angular 指令，并执行该指令中的 jQuery 代码。

angular.module('myApp').directive('jqStuff', function() {
    return {        
        restrict: 'A',
        link: function (scope, element, attr) {
            // add jQuery stuff here
            // you can get the id of the element like this
            console.log(attr.id);
        }
    }
});

不要忘记将指令绑定(bind)到您的表:

<table id="dataTable_{{$ctrl.entry.id}}" class="table scrolling-table" jq-stuff>
...
</table>