Run jQuery function in Angular App

Question

I'm using jquery in an html table, this is my first example FIDDLE

the thing is when I try to pass this example to my angular app it doesnt work

This is my view in agular:

                    <table class="table table condensed drillDown">
                    <thead>
                        <tr style="background-color: #E3E3E3">
                            <th style="width: 5%"></th>
                            <th style="text-align: center">Categories</th>
                            <th style="text-align: center">LW $</th>
                            <th style="text-align: center">LW</th>
                            <th style="text-align: center">L4 W</th>
                            <th style="text-align: center">L13 W</th>
                            <th style="text-align: center">L52 W</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr ng-repeat="d in category" class="parent">
                            <td ng-class="expand" style="cursor: pointer"></td>
                            <td>{{d.desc}}</td>
                            <td>{{d.LW$}}</td>
                            <td>{{d.LW}}</td>
                            <td>{{d.L4W}}</td>
                            <td>{{d.L13W}}</td>
                            <td>{{d.L52W}}</td>
                        </tr>

                        <tr ng-repeat="d in subcat" class="child">
                            <td ng-class="expand" style="cursor: pointer"></td>
                            <td>{{d.desc}}</td>
                            <td>{{d.LW$}}</td>
                            <td>{{d.LW}}</td>
                            <td>{{d.L4W}}</td>
                            <td>{{d.L13W}}</td>
                            <td>{{d.L52W}}</td>
                        </tr>
                    </tbody>
                </table>

So as you can see, I call my parent, child and expand class the same way I'm doing on the regular html example but I cant make it work

The jquery code that im using is in the fiddle, but I read that this can be done by using a directive but I dont know how to do this, Im new with angular.

Some help would be nice

This is my example using angular Angular FIDDLE example

Can you specify what's wrong exactly, do u get an error message? — Alizoh, Apr 07 '16 at 17:00
No, I dont get any error message. The thing is that when I run the example with angular nothing happens, the table dont expand as the example I put in the fiddle, looks like it doesnt recognize jquery or something. — kennechu, Apr 07 '16 at 17:17
@user2181397 Here it is using agular https://jsfiddle.net/dqbr6dnb/ — kennechu, Apr 07 '16 at 17:27

score 1 · Answer 1 · edited May 23 '17 at 11:50

The table in the angular version doesn't exist when your jQuery function is trying to run, so the jQuery function isn't able to modify the table.

Angular is really a different way of building UIs, so it would be useful to read up about directives and the angular lifecycle. A super useful discussion on the topic: "Thinking in AngularJS" if I have a jQuery background?

I don't have much of an answer, but you need more than just a code snippet here.

score 1 · Accepted Answer · answered Apr 07 '16 at 18:28

Yes, a directive would be the way to go. I created an example using your jQuery in a directive here:

https://jsfiddle.net/h90Luy3h/

The directive is restricted to the drill-down attribute in the td tag. I'm a fan of using attributes or elements over classes for directive hooks because I think they're easier to identify and you can be pretty explicit with what it's doing by the name of the directive. Classes as hooks can get messy and really should only apply to a style rather than a dom identifier, but that's definitely a personal preference.

function drillDown() {

var directive = {
    restrict: 'A',
    link: link
};

return directive;

function link(scope,element) {

    var table = $('.categories-table');

    table.each(function() {
        var $table = $(this);
        $table.find('.parent').each(function(){
            if($(this).nextUntil('.parent', ".child").length > 0){
                $(this).children('td:first').html('+');
            }
        });
        $table.find('.child').each(function(){
            if($(this).nextUntil('.child', ".grandson").length > 0){
                $(this).children('td:first').html('+');
            }
        });

        var $childRows = $table.find('tbody tr').not('.parent').hide();
        $table.find('button.hide').click(function() {
            $childRows.hide();

        });
    });
    element.on('click',function(){
        if($(this).parent().hasClass('parent') == true)
        {
            console.log("----Parent");
            if ($(this).text() == "+")
                $(this).text("-")
            else
                $(this).text("+");

            $(this).parent().nextUntil('.parent', ".child").fadeToggle("slow", "linear");
            $(this).parent().nextUntil('.parent', ".grandson").hide("fast");
            $(this).parent().nextUntil('.parent', ".child").each(function(){

                if($(this).children('td:first').text() == '-')
                    $(this).children('td:first').text('+');
            });
        }
        else if($(this).parent().hasClass('child') == true)
        {
            console.log("----Child");
            if ($(this).text() == "+")
                $(this).text("-")
            else
                $(this).text("+");
            $(this).parent().nextUntil('.child', ".grandson").fadeToggle("slow", "linear");
        }
    });
}
}

Hey Rob, one more question. In the Fiddle you create for me If i add a second record in category, now I have "two" the child goes to the last record in this case category two, so if I click on the first cat norhing happens but if I click on the second then it expands. My question is, how can I make to each "parent" row has its own child so if I add a category row each of them expands independently. — kennechu, Apr 11 '16 at 17:40

Run jQuery function in Angular App

2 Answers2