javascript - 每次点击时都会再次调用自定义函数

Question

我是 Angular JS 的新手，我已经设置了一个带有项目表的基本 HTML 页面。 我希望能够单独删除每个项目，因此我为 HTML 表格的每一行添加了一列，其中包含一个删除按钮。 这就是本专栏的样子。

<td headers="deleteRoleHeader" class="cell-texte">
    <span class="glyphicon glyphicon-trash" ng-click="deleteRole();"></span>
</td>

还有我的 Angular JS 函数:

$scope.deleteRole = function(){
    var data = {
                codeRole: $scope.code_role,
                descRole : $scope.desc_role
               };
    console.log(data);
};

我的问题是每次我单击删除按钮时，我的函数都会比前一次被调用一次。 澄清一下:第一次点击时，函数被调用一次，第二次点击时，函数被调用两次，依此类推。

我希望当我单击删除按钮时只调用我的函数一次。

有人遇到过类似的问题吗？ 我读过很多有关多次调用函数的 stackoverflow 问题，但我无法解决我的问题。

预先感谢您的帮助。

编辑:这是我点击两次后的控制台输出

编辑2:我找出了导致问题的原因:我设置了一个模式，作为确认，如果我删除它，我的代码将按其应有的方式运行(仅对该函数进行一次调用) 这是重现问题的 fiddle :https://jsfiddle.net/w6edum0f/12/ .

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.roles = [
{
    "codeRole": "test",
    "descRole": "test desc"
  },
  {"codeRole": "test2",
    "descRole": "test desc1"
  }
];
  $scope.selectRole = function(role) {
    $scope.code_role = role.codeRole;
    $scope.desc_role = role.descRole;
  };

    $scope.deleteRole = function(){
        $('#deleteModal').show();
        $('#deleteBtn').click(function(){
            $('#deleteModal').hide();
            var data = {
                codeRole: $scope.code_role,
                descRole : $scope.desc_role
            };
            console.log(data);
        });
    };
});

Answer 1

first time I click, function is called once, second time I click, function is called twice, etc.

发生这种情况是因为代码在每次调用时添加另一个点击处理程序:

ERRONEOUS

$scope.deleteRole = function(){
    $('#deleteModal').show();
    $('#deleteBtn').click(function(){
        $('#deleteModal').hide();
        var data = {
            codeRole: $scope.code_role,
            descRole : $scope.desc_role
        };
        console.log(data);
    });
};

一种解决方案是删除调用后的点击处理程序:

$scope.deleteRole = function(){
    $('#deleteModal').show();
    $('#deleteBtn').on("click", hideModal);
};
function hideModal(){
    $('#deleteModal').hide();
    $('#deleteBtn').off("click", hideModal); 
    var data = {
        codeRole: $scope.code_role,
        descRole : $scope.desc_role
    };
    console.log(data);
};