使用SweetAlert2删除元素时出现显示异常及弹窗时序错乱问题

这个问题的核心原因是SweetAlert2的回调函数运行在AngularJS的digest循环之外——当你在then回调里修改$scope.taggingRows和$scope.taggingRowsAct时，Angular并没有检测到这些数据变化，所以视图不会自动更新。而第二次点击时，Angular在处理点击事件的过程中触发了digest循环，这才把第一次修改后的数组状态渲染到视图上，就出现了"先删元素再弹弹窗"的诡异现象。

修复方案：手动触发Angular的digest循环 #

你只需要在修改完数组之后，调用$scope.$apply()来通知Angular检测数据变化并更新视图。或者更安全的方式是用$timeout包裹修改操作（$timeout会自动触发digest，还能避免"digest already in progress"的错误）。

下面是修改后的代码，我标出来了关键的改动：

$scope.remove = function (i) { 
    swal({ 
        title: "Are you sure?", 
        text: "Once aaa deleted, you will not be able to recover this imaginary file!", 
        icon: "warning", 
        buttons: true, 
        dangerMode: true, 
        showLoaderOnConfirm: true 
    }).then((willDelete) => { 
        if (willDelete) { 
            $scope.taggingRows.splice(i, 1); 
            // 这里注意：splice第二个参数是删除数量，传0不会删除元素，疑似笔误，建议改成splice(i,1)
            $scope.taggingRowsAct.splice(i, 1); 
            
            // 关键改动：手动触发digest循环，让Angular更新视图
            $scope.$apply(); 
            
            swal("Your file has been deleted!", { icon: "success" });
        } else { 
            swal("Your file was not deleted!"); 
            console.log("r1canceled" + r); 
            r = false; 
            console.log("r2canceled" + r); 
        } 
    });
};

额外小提醒 #

我注意到你原本写了$scope.taggingRowsAct.splice(i, 0);——splice的第二个参数是要删除的元素数量，传0的话不会删除任何元素（只是在索引i的位置插入新元素，但你这里没有第三个参数）。如果这是笔误，应该改成$scope.taggingRowsAct.splice(i, 1);来对应删除操作哦。

内容的提问来源于stack exchange，提问作者kanishka malpana