1

On my angular page i have three accordions. Each loads a component view with a danymic generated table inside. This means, i have table one, two and three on the whole page. Above each table is a JQuery part to access this table. Actually i do this by finding the table via the css class (ex. table.scrolling-table).

This works fine with the first table 'cause the code only can find the first table on page (but i have three different). Each table has a dynamic id called dataTable_{{$ctrl.entry.id}}. Now i want to access this id with the JQuery call. How can i apply the danymic id in my JQuery table inside the component?

Angular Component 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>
vandango
  • 567
  • 1
  • 4
  • 13
  • As with all dom related code in angular apps you use directives to access elements. What exactly are you needing to do? – charlietfl Feb 09 '17 at 13:13
  • I do a column resize on window.resize.event. This is related to a scrollable data table. Same problem happens if i use something like the datatables-node-module. All what exist needs a fix id on a html object which i cannot add in angular code. This is really a frustrating thing... – vandango Feb 09 '17 at 13:20
  • all that should be done in directive. Sounds like app design is flawed. Suggest reading [“Thinking in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl Feb 09 '17 at 13:30

1 Answers1

0

You can create an angular directive that binds as an attribute and execute the jQuery code in that directive.

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

Don't forget to bind the directive to your table:

<table id="dataTable_{{$ctrl.entry.id}}" class="table scrolling-table" jq-stuff>
...
</table>
btlj
  • 46
  • 1
  • 4
  • Ok, so i have to create a directive for my application? – vandango Feb 09 '17 at 13:23
  • I cannot do this, because there is something more in my code. I do a column-resize on page load and also on window.resize. – vandango Feb 09 '17 at 13:26
  • I added some code in my example to help understating my problem. – vandango Feb 09 '17 at 13:28
  • 1
    arguments for controller are wrong. You are showing `link` arguments – charlietfl Feb 09 '17 at 13:29
  • You can handle the window resize events in angular. Just inject the $window in the directive and register to the resize event. You can find an example [here](http://stackoverflow.com/questions/31622673/angularjs-watch-window-resize-inside-directive). – btlj Feb 09 '17 at 13:30
  • Ok, i will try it. – vandango Feb 09 '17 at 13:34
  • Ok, i put all inside a directive. But (maybe i dont know how) i cant access the table object. I call it via `var $table = $(attr.id)` but `$table.find('tbody tr:first').children()` has no children. – vandango Feb 09 '17 at 14:30
  • The correct jQuery selector is `$('#' + attr.id)`. Angular provides similar selectors so check if you actually need to use jQuery. – btlj Feb 09 '17 at 16:18