以角度从jquery访问动态html对象ID

Question

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

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

Angular 组件视图

<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

您可以创建一个绑定为属性的 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);
        }
    }
});

不要忘记将指令绑定到您的表格：

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