避免在单击时在Angular JS视图中调用两次函数

时间:2016-05-17 17:45:47

标签: javascript jquery angularjs

我有一个指令来扩展和折叠html表的行,正如你在第一列的图像中看到的那样 我有一个“+”符号,所以当我点击它时,我调用一个函数,它调用一个与该记录相关的数据的WS。 (那部分工作正常)

enter image description here

这是我的指示:

angular.module('headline.Drilldown',[])
.directive('drillDown',drillDown);

 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').dblclick(function() {
            $childRows.hide();

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

            $(this).parent().nextUntil('.parent', ".child").fadeToggle("fast", "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("fast", "linear");
        }
    });
}

这就是我在控制器中使用我的功能的方法:

$scope.drillDown = function () {
//Call to WS    
}

这是我在视图中调用我的函数的方式:

<tr class="parent">
 <td ng-click="drillDown()" ng-class="expand" drill-down></td>
</tr>

<tr class="child">
 <td d in data ng-class="expand" drill-down></td>
 <td>d.description</td>
 <td>d.lastName</td>
</tr>

我的问题是,如果我点击它崩溃一旦它扩展它再次调用该函数,我只是想调用函数扩展一行不要崩溃因为它调用相同的数据两次,我不知道如何实现这根本不知道,我真的需要帮助。

0 个答案:

没有答案