AngularJS 自定义删除确认对话框在AngularJS中的应用

在本文中，我们将介绍如何在AngularJS中自定义删除确认对话框，并提供了相应的代码示例。删除操作是Web应用中常见的操作之一，为了避免用户误操作导致数据丢失，我们通常会在删除操作前弹出确认对话框。

使用AngularJS自定义删除确认对话框

首先，我们需要引入AngularJS库，并在HTML中定义一个包含删除功能的按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Custom Delete Confirm</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="showDeleteConfirm()">删除</button>
</body>
</html>

接下来，在JavaScript代码中定义AngularJS应用和控制器，并在控制器中添加一个用于显示删除确认对话框的函数。

var app = angular.module('myApp', []);

app.controller('myCtrl', function ( $scope,$ window) {
     $scope.showDeleteConfirm = function () { if ($ window.confirm("确定要删除吗？")) {
            // 执行删除操作
            // ...
        }
    };
});

在上述代码中，我们使用了$window.confirm方法弹出一个确认对话框。如果用户点击了确认按钮，则执行删除操作。你可以在删除操作前添加合适的代码来处理删除逻辑。

自定义删除确认对话框的样式

默认的确认对话框样式可能无法满足我们的需求，我们可以自定义一个样式更符合应用界面的对话框。以下是一个自定义样式的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Custom Delete Confirm</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close" ng-click="hideDeleteConfirm()">×</span>
            <p>确定要删除吗？</p>
            <button ng-click="deleteItem()">确定</button>
        </div>
    </div>

    <button ng-click="showDeleteConfirm()">删除</button>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myCtrl', function ( $scope) {$ scope.showDeleteConfirm = function () {
                document.getElementById('modal').style.display = 'block';
            };

             $scope.hideDeleteConfirm = function () { document.getElementById('modal').style.display = 'none'; };$ scope.deleteItem = function () {
                // 执行删除操作
                // ...

                $scope.hideDeleteConfirm();
            };
        });
    </script>
</body>
</html>

在上述代码中，我们使用了一个自定义样式的删除确认对话框。通过点击”删除”按钮，对话框将会以覆盖整个页面的方式弹出。用户可以点击对话框内的”确定”按钮执行删除操作，或点击对话框上的”×”关闭对话框。