jQuery doesn' t work for AngularJS directive

Question

I have to resize the column width of my table that is located inside my directive. I found a valid framework to do that: Resizable table columns with jQuery. However, I have the following problem. Make the resize column works is quite simple, just add this jQuery code inside my Angular controller :

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

Where normal is the ID of my table, which is the following :

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

Now the problem is that jQuery is not working for the table inside a directive, i mean , if i put the table inside a normal html page the resize of column width it works, but if i put the table code inside an AngularJs directive it doesn't work.

I have just the table inside my page, there is no other code that could influence the function of it.

I guess that the problem is the jQuery, but I'm not completely sure about it. I'm new to Angular and maybe there is something that I should do configure in my directive?

@ NightsWatch Yes, exactly, i have just find the solution, i have to add the jquery code inside the directive instead of the controller. — putz, Jun 14 '16 at 11:29
Cool! I was thinking by giving replace : true property inside your custom directive might do the magic. If possible can you please try with this and share your feedback. It might help for someone else. — NightsWatch, Jun 14 '16 at 11:31
@NightsWatch Actually it already has the replace property set to true — putz, Jun 14 '16 at 11:39

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

I would suggest you try to utilize Angular only if you are not sure how DOM works and how to have a clean code of jquery within angular.

Try referring Resizable columns with Angularjs

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 14 '16 at 11:33

Farhan

505
5
16

jQuery doesn' t work for AngularJS directive

1 Answers1