AngularJS:在确认对话框上单击on时的不同回调

在AngularJS中，确认对话框通常是通过JavaScript的confirm()函数或者使用AngularJS的模态框（modal）组件来实现的。当用户点击确认对话框上的“确定”按钮时，可以触发不同的回调函数。以下是一些基础概念和相关信息：

基础概念

回调函数：回调函数是一种使程序更加灵活和模块化的编程技术，它允许将一个函数作为参数传递给另一个函数，并在适当的时候调用。
确认对话框：这是一种常见的用户界面元素，用于在执行重要操作之前获取用户的确认。

类型

原生JavaScript确认对话框：使用window.confirm()方法。
自定义模态框：使用AngularJS的指令如ngDialog、ui-bootstrap中的模态框组件。

应用场景

删除操作：在删除重要数据前需要用户确认。
重要设置更改：在更改关键系统设置前需要用户确认。

示例代码

以下是使用原生JavaScript确认对话框和AngularJS自定义模态框的示例代码。

使用原生JavaScript确认对话框

$scope.deleteItem = function(item) {
    if (window.confirm('Are you sure you want to delete this item?')) {
        // 用户点击了“确定”，执行删除操作
        // 这里可以调用服务或执行其他逻辑
        console.log('Item deleted:', item);
    } else {
        // 用户点击了“取消”
        console.log('Delete operation cancelled');
    }
};

使用AngularJS自定义模态框

首先，你需要引入ui-bootstrap库，并在你的AngularJS应用中配置它。

<!-- 在HTML中 -->
<button ng-click="openConfirmModal()">Delete Item</button>

// 在控制器中
angular.module('myApp', ['ui.bootstrap'])
.controller('MyController', ['$scope', '$uibModal', function($scope, $uibModal) {
    $scope.openConfirmModal = function() {
        var modalInstance = $uibModal.open({
            templateUrl: 'confirmModal.html',
            controller: 'ConfirmModalCtrl'
        });

        modalInstance.result.then(function(result) {
            if (result === 'confirmed') {
                // 用户点击了“确定”，执行删除操作
                console.log('Item deleted');
            }
        }, function() {
            // 用户点击了“取消”
            console.log('Delete operation cancelled');
        });
    };
}]);

// 确认模态框的控制器
angular.module('myApp')
.controller('ConfirmModalCtrl', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) {
    $scope.ok = function() {
        $uibModalInstance.close('confirmed');
    };

    $scope.cancel = function() {
        $uibModalInstance.dismiss('cancel');
    };
}]);

<!-- confirmModal.html -->
<div class="modal-header">
    <h3 class="modal-title">Confirm Delete</h3>
</div>
<div class="modal-body">
    Are you sure you want to delete this item?
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>