javascript - 在 Angular 应用程序中运行 jQuery 函数

Question

我在 html 表中使用 jquery，这是我的第一个示例 FIDDLE

问题是，当我尝试将此示例传递给我的 Angular 应用程序时，它不起作用

这是我对 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>

正如你所看到的，我以与常规 html 示例相同的方式调用我的父类、子类和扩展类，但我无法使其工作

我使用的jquery代码在 fiddle 中，但我读到这可以通过使用指令来完成，但我不知道如何做到这一点，我是 Angular 新手。

一些帮助会很好

这是我使用 Angular Angular FIDDLE example 的示例

Answer 1

是的，指令是可行的方法。我在此处的指令中使用 jQuery 创建了一个示例:

https://jsfiddle.net/h90Luy3h/

该指令仅限于 td 标记中的向下钻取属性。我喜欢在指令钩子(Hook)中使用属性或元素而不是类，因为我认为它们更容易识别，并且您可以通过指令名称非常明确地了解它正在做什么。作为钩子(Hook)的类可能会变得困惑，并且实际上应该只应用于样式而不是 dom 标识符，但这绝对是个人偏好。

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