在Angular App中运行jQuery函数

Run jQuery function in Angular App

本文关键字：jQuery 函数 运行 Angular App      更新时间：2024-02-19

我在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代码是临时的，但我读到这可以通过使用指令来完成，但我不知道如何做到这一点，我是angular的新手。

一些帮助会很好

这是我使用角度角度FIDDLE示例

的示例

是的，指令就是最好的方法。我在这里的指令中使用jQuery创建了一个示例：

https://jsfiddle.net/h90Luy3h/

该指令仅限于td标记中的钻取属性。我喜欢在类上使用属性或元素作为指令挂钩，因为我认为它们更容易识别，而且通过指令的名称可以非常明确地说明它的作用。作为钩子的类可能会变得混乱，实际上应该只应用于样式而不是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");
        }
    });
}
}

当jQuery函数试图运行时，angular版本中的表不存在，因此jQuery函数无法修改该表。

Angular实际上是一种不同的构建UI的方式，因此了解指令和Angular生命周期会很有用。关于这个主题的一个非常有用的讨论：；AngularJS中的思考；如果我有jQuery背景？

我没有太多答案，但您需要的不仅仅是这里的代码片段。

相关文章：