警报和确认对话框 AngularJs

Question

我正在尝试在我的 angular 应用程序中使用 bootstrap 模态服务实现 Alert/Confirmation 对话框。我想让它成为通用的，基于我传递给模态控制器的参数，它要么表现为警告框，用户可以在阅读模态上的消息时关闭它，也可以表现为确认对话框，其中用户应该说 'OK' 或 'Cancel' 我需要捕获我能够捕获的用户的响应。现在，这里的问题是我在网格中列出了项目列表，当用户想要从列表中删除项目时，我需要显示确认消息框，并且根据用户响应，我需要删除该项目或者如果用户希望将其保留在列表中，则将其保留，但我的项目首先被删除，然后出现确认对话框，我尝试使用回调但仍然没有用。如果有人遇到这种情况，请帮助我。

显示警报的方法：

$scope.showAlertMessage = function (modalName,commands,callback)
    {
        var modalOptions = {};
        var alertMessageText;       
        var okBtn;
        var cancelBtn;
        var autoCloseTimeout;        
        $scope.modalResp === false;

        if (modalName === 'ItemNotEligible')
        {
            modalOptions['template'] = 'application/Views/ItemNotEligibleAlert.html';
            modalOptions['cntrlr'] = 'itemAlertsController';
            modalOptions['winClass'] = 'item-alert-win';
            alertMessageText = commands.alertMessage.text;            
            okBtn=true;
            cancelBtn = false;
            autoCloseTimeout=commands.alertMessage.autoDismissalTimeout;

        }
        else if (modalName === 'ItemDelete')
        {
            modalOptions['template'] = 'application/Views/ItemNotEligibleAlert.html';
            modalOptions['cntrlr'] = 'itemAlertsController';
            modalOptions['winClass'] = 'item-alert-win';
            alertMessageText = commands.alertMessage.text;            
            okBtn = true;
            cancelBtn = true;
            autoCloseTimeout = commands.alertMessage.autoDismissalTimeout;
        }

        var params = { alertMessage: alertMessageText};

        var modalInstance=$modal.open({
            templateUrl: modalOptions.template,
            controller: modalOptions.cntrlr,
            windowClass: modalOptions.winClass,
            resolve: {
                modalParams: function () {
                    return params;
                }
            }
        });

        modalInstance.result.then(function (selected) {
            $scope.modalResp = selected; //Response from the dialog
        });
        callback($scope.modalResp);
    }

存在删除项逻辑并调用显示警报方法的方法

this.voidItem = function (skuid) {

        alertMessage.text = 'Are you sure you want to remove <strong>' + itemdata[itmid].split('|')[0] + '</strong> from your list?';

        $scope.showAlertMessage('ItemDelete', commands, function (userresp) {
            if (userresp === true) {
                var lineId = 0;

                for (var i = itemListState.length - 1; i >= 0; i--) {
                    if (parseInt(itemListState[i].item) === itmid && Boolean(itemListState[i].isItemVoid) != true) {
                        lineId = itemListState[i].Id;
                        if (lineId != 0) {
                            break;
                        }
                    }
                }

                poService.DeleteItem(itmid, lineId, function (modal) {
                    virtualtable = modal;
                    $scope.itemCount = $scope.itemCount - 1;
                    $scope.createlist(itmid);
                });
            }
        });
    }

Answer 1

问题是您正在执行回调而不是将方法链接到 promise 的结果

  modalInstance.result.then(function (selected) {
        callback($scope.modalResp); //Once the promise is solved, execute your callback
        $scope.modalResp = selected; //Why you need to save the response?
    // If the user press cancel o close the dialog the promise will be rejected 
    }, onUserCancelDialogFn);

更简单的方法：

  modalInstance.result
    .then(callback, onErrBack);

警报和确认对话框 AngularJs

Alert and Confirmation dialog box AngularJs

angularjs

twitter-bootstrap

bootstrap-modal