current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
    
using jquery like this with angular.. is a code smell.. write an angular directive to handle this scenario –  entre Mar 11 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 Mar 11 at 18:51

1 Answer 1

up vote 2 down vote accepted

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" ] ]
            });
        }
    }
});
share|improve this answer
    
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 Mar 11 at 18:50
    
@jth_92 please check the updated answer. –  Vinay K Mar 11 at 18:53
    
It was a good idea... the link function gets fired before the tab content is added: <div class="tab-content"> <!-- ngRepeat: tab in tabs --> </div> –  jth_92 Mar 11 at 19:05
    
Got it working... just put the has-datagrid on the table / element itself within the tabs. Thanks! –  jth_92 Mar 11 at 19:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.