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：我弄清楚了导致问题的原因：我建立了一个模式，作为一个确认，如果删除它，我的代码将按应有的方式工作（仅对函数进行一次调用） 这是一个重现该问题的小提琴：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

第一次单击，函数调用一次，第二次单击，函数调用两次，等等。

之所以会这样，是因为代码在每次调用时都添加了另一个点击处理程序：

错误

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

Answer 2

好的，伙计们，我尝试制作一个小角度的应用程序，并尝试运行相同的代码，以便使我们处于相同的上下文中：

链接到jsfiddle https://jsfiddle.net/dupinderdhiman/nd8wm5pg/1/

原因： ：原因是冒泡，当我们从对话框中单击okay按钮时，在单击delete之后打开该对话框，然后冒泡开始，所以要处理冒泡，我尝试以下技巧，如果需要：P

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

        });
    };

以下是正在运行的代码段：

    <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  <table>
    <thead>
      <tr>deleteRole
        <th><span>Code</span>
        </th>
        <th><span>Description</span>
        </th>
        <th>
          Suppression
        </th>
      </tr>
    </thead>

    <tbody>
      <div>
        <div>
          <tr ng-repeat="role in roles" 
          ng-click="selectRole(role);">
            <td>{{ role.codeRole }}</td>
            <td>{{ role.descRole }}</td>
            <td>
              <span title="Supprimer le rôle" 
              ng-click="deleteRole();">Delete</span>
            </td>
          </tr>
        </div>
      </div>
    </tbody>
  </table>

<div id="deleteModal" class="modal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h1 class="modal-title">Confirmation</h1>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
					</div>
					<div class="modal-body">
						<p>Voulez-vous supprimer l'élément ?</p>
					</div>
					<div class="modal-footer">
						<button type="button" id="deleteBtn" class="btn btn-primary">Supprimer</button>
						<button type="button" id="cancelDeleteBtn" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
					</div>
				</div>
			</div>
		</div>


</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
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();
		 var isDeleteBtnClicked = false;
		    $('#deleteBtn').click(function($event){
				if(!isDeleteBtnClicked)
				{
					$('#deleteModal').hide();
					var data = {
						codeRole: $scope.code_role,
							   descRole : $scope.desc_role
						   };
					console.log(data);
					isDeleteBtnClicked = true;
				}
        
        });
    };
});
</script>

</body>
</html>

如果仍有疑问，请告诉我

每次单击都会再次调用自定义函数

2 个答案: