Using jQuery with Directives in AngularJS

Question

I'm using Angular UI bootstrap tabs and jQuery datatables. However, the jQuery to instantiate the datatables is getting fired before AngularJS processes the directive. Please advise.

<tabset>
    <tab heading="Heading 1">
        <div id="my_div_container">Some dynamic content</div>
        <table id="myTable">
          <tr>
             <th>Column 1</th>
             <th>Column 2</th>
             <th>Column 3</th>
          </tr>
          <tr>
             <td>Value 1</td>
             <td>Value 2</td>
             <td>Value 3</td>
          </tr>
    </tab>
</tabset>

<script type="text/javascript">
    jQuery("document").ready(
        function($) {
            $('#my_div_container').html('my jQuery content');
            $("#myTable").dataTable({
                 aLengthMenu : [ [ 10, 25, 50, 100, -1 ],
                    [ 10, 25, 50, 100, "All" ] ]
            });
        }
    );
</script>

using jquery like this with angular.. is a code smell.. write an angular directive to handle this scenario — harishr
– harishr, Commented Mar 11, 2015 at 18:43
Tabset is a directive in: angular-ui.github.io/bootstrap/#/tabs. I don't think there is a directive for the jQuery datatables (as nice anyways) and it does a LOT. — jth_92
– jth_92, Commented Mar 11, 2015 at 18:51

Vinay K · Accepted Answer · 2015-03-11 18:52:54Z

3

Try this solution.

<tabset has-datagrid>
   <tab></tab>
</tabset>

module.directive('hasDatagrid', function () {
    return {
        link: function (scope, element) {
            // angular finished the processing the tabset and tab now. 
            // ok to access the dom at this point
            element.find('#my_div_container').html('my jQuery content');
            element.find("#myTable").dataTable({
                    aLengthMenu : [ [ 10, 25, 50, 100, -1 ],[ 10, 25, 50, 100, "All" ] ]
            });
        }
    }
});

edited Mar 11, 2015 at 18:52

answered Mar 11, 2015 at 18:42

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jth_92 Over a year ago

It is a directive in Angular UI: angular-ui.github.io/bootstrap/#/tabs. I have a minified version of that. Do I need to get the unminified and edit the link function? I don't want it to occur with every use of that directive. Ideally, I would want a tabset.ready() event.

jth_92 Over a year ago

It was a good idea... the link function gets fired before the tab content is added: <div class="tab-content">  </div>

jth_92 Over a year ago

Got it working... just put the has-datagrid on the table / element itself within the tabs. Thanks!

Collectives™ on Stack Overflow

Using jQuery with Directives in AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related