使用 JS 在 Angular 中为删除按钮创建确认警报答案

【问题标题】：Create a confirmation alert for delete button in Angular using JS使用 JS 在 Angular 中为删除按钮创建确认警报
【发布时间】：2013-03-03 11:46:16
【问题描述】：

我有一个带有删除按钮的表单，我想创建一个确认框，当单击删除按钮时会弹出。删除按钮当前有效。我在javascript中尝试了几件事，但没有运气。我正在使用 Angular。

这是最好的方法吗？

另外，有谁知道这方面的任何例子，我还没有找到任何有用的例子。

$(document).ready(function(){
  $("form").validate();
  $(".radius small success button").ConfirmDialog('Are you sure?');
});

【问题讨论】：

一些真实代码而不是伪代码怎么样——请告诉我们您尝试过的内容，并指出哪些不工作。
@MarkRajcok 这很公平，我已经添加了我所拥有的。有什么想法我的方向是正确的吗？

标签： javascript angularjs confirmation

【解决方案1】：

对于这个问题的解决方案，AngularJS 指令似乎有点过头了。除非您需要为“confirm()”函数添加一些自定义功能，否则直接使用 javascript 似乎更容易。

if (confirm('Are you sure you want to delete this?')) {
     // TODO:  Do something here if the answer is "Ok".
}

希望对你有帮助，干杯

更新：实际上，对于 Angular，使用 $window.confirm 会更好，因为这将允许您使用 Karma/Jasmine 进行测试。

【讨论】：

这可以正常工作，直到用户选择不在 Chrome 中显示警报/确认。在 Chrome 中，当您得到确认时，会有一个复选框“不要显示这样的消息”。它已经消失了。
当然，但警报默认开启。为了防止这种情况发生，一个不使用 confirm() 处理警报框的指令可以解决这个问题。

【解决方案2】：

Here 的另一种方法。基本上，它是一个指令，用于获取您要显示的警告字符串，以及在用户接受时调用的函数。使用示例：

<button type="button" ng-really-message="Are you sure?"
ng-really-click="delete()">Delete</button>

【讨论】：

一个基本的浏览器对话框可以在没有指令if(confirim('Are you sure?')) { Do Something } 的情况下显示完全相同同样的事情，但开销要少得多。
请在您的答案中包含您解决方案的所有代码。
他确实包含了所有必要的代码——点击“这里”这个词。而且，不，您不能在 ng-click 中使用确认，因为您不能在这些表达式中拥有控制流。
@GuyArgo 但是可以链接到外部站点；所有相关代码都应包含在答案中，以防网站不可用See Provide Context for Links。并且控制流可以放在delete() 方法中，这样就不需要指令Example
如果这需要在谷歌扩展中实现，你不能使用内联javascript，所以指令将是一个很好的解决方案。

【解决方案3】：

这就是我们处理“确认对话框”的方式（使用引导程序）

标记

<div class="alert alert-block alert-error notification fade in" data-ng-show="displayLocationDeletePopup">
    <h6>Are you sure you want to delete this location?</h6>
    <div class="form-controls-alert">
        <a href="" class="btn" data-ng-click="showDeleteLocationPopup(false)">No</a>
        <a href="" class="btn btn-danger" data-ng-click="deleteVendorLocation(locationId)">Yes</a>
    </div>
</div><!-- end alert -->

在控制器加载时将模型设置为 false 以默认使用 ng-show 隐藏

$scope.displayLocationDeletePopup = false;

在点击事件以显示弹出窗口时，调用函数/传入模型

<i class="icon-remove" data-ng-click="showDeleteLocationPopup(true, location)"></i>

在控制器中：

$scope.showDeleteLocationPopup = function(options, id) {
    if (options === true) {
        $scope.displayLocationDeletePopup = true;
    } else {
        $scope.displayLocationDeletePopup = false;
    }
    $scope.locationId = id;
};

根据上面 html 中的锚点，可以关闭弹出窗口或运行函数

$scope.deleteVendorLocation = function (storeLocation) {
   // Code to run on confirmation            
};

【讨论】：

我喜欢这个给引导用户的。

【解决方案4】：

var r = confirm("Are you sure you want to Permanently delete this order?");
if (r == true) {
    (OK button click) Write the function here.....
} else {
    (Cancle button click) Write the function here.....
}

【讨论】：

【解决方案5】：

将删除选项放在每条记录的右侧，单击删除选项后，记录应从详细信息和 JSON 数组中删除。

【讨论】：