jQuery doesn' t work with angularJs

Question

I'm trying to use a jquery plugin to resize the column of a table, here there is an explication : Resizable table columns with jQuery , is the part of colResiazable. This plugin works whit a standard html table :

<div id="searchTable">
    <div id="container" style="position: relative">

        <table id="normal" width="100%" border="0" cellpadding="0"
            cellspacing="0" class="coverhidtable">
            <tr>
                <th>header</th>
                <th>header</th>
                <th>header</th>
            </tr>
            <tr>
                <td class="">cell</td>

            </tr>
            <tr>
                <td class="">cell</td>

            </tr>
            <tr>
                <td class="">cell</td>

            </tr>
        </table>

    </div>
</div>

but it stops to work when i use an angularJs table :

<div id="searchTable">
    <div id="container" style="position:relative">
        <table id="normal" width="100%" border="0" cellpadding="0"
            cellspacing="0" class="">


            <tr class="tableList-head" >
            <th ng-hide="hd.hidden"  ng-repeat="hd in conf.heads">
                        {{hd.name}}
                    </th>
            </tr>


                <tr ng-repeat="data in conf.myData" >  
                    <td  ng-hide="d.hidden" ng-repeat="d in conf.heads">
                        {{data[d.name]}}</span>

                    </td>   
                </tr>   

        </table>

    </div>
</div>

The angularJs table is an angular directive :

.directive('angTable',['$compile',function($compile) {
                            return {
                                restrict : 'E',
                                templateUrl : 'components/table/tableTemplate.html',
                                replace : true,
                                scope : {
                                    conf : "="
                                },
                                controller : function($scope,$rootScope) {

and here inside the declaration of the directive i add the jQuery code for make the jQueryplugin works :

$("#normal").colResizable({
    liveDrag:true, 
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging", 
    resizeMode:'fit'
});

Now, in the first table it works, while in the second it doesn't. I read something about angularJs modification of the dom and i guess that the problem should be that, i mean maybe the id "normal" of the table is not retrived, but i'm new of angular and i don't know how to fix it. Any suggestion would be appreciated

if you want to use jquery must be include before angular js files.may be you include jquery lib before angular. — Hadi J, Jun 15 '16 at 08:08
@ SSH what do you mean, where i should insert the jQuery code ? — putz, Jun 15 '16 at 08:11

score 1 · Answer 1 · answered Jun 15 '16 at 08:14

1

For this you have to include jQuery library before angular and you have to put that code inside link function of DDO:

link:function(scope, el, attrs){
    $("#normal").colResizable({
        liveDrag:true, 
        gripInnerHtml:"<div class='grip'></div>", 
        draggingClass:"dragging", 
        resizeMode:'fit'
    });
}

answered Jun 15 '16 at 08:14

Jai

74,255
12
74
103

I already have a compile for my directive, can be the same : – putz Jun 15 '16 at 08:41

jQuery doesn' t work with angularJs

1 Answers1