将 jQuery 与 AngularJS 中的指令一起使用

Question

我正在使用 Angular UI bootstrap 选项卡和 jQuery 数据表。但是，jQuery 实例化数据表在 AngularJS 处理指令之前被触发。请指教

<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>

Answer 1

试试这个解决方案。

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