警报和确认对话框AngularJs

时间:2015-04-03 16:40:11

标签: angularjs twitter-bootstrap bootstrap-modal

我正在尝试使用我的角应用中的引导模式服务实现警报/确认对话框。我想把它变成通用的,基于我传递给模态控制器的参数,它将表现为警报框,用户只需在读取模态上的消息时关闭它,它也可以像确认对话框一样用户应该说“确定”或“取消”我需要捕获用户的响应,我能够。现在,这里的问题是我在网格中列出的项目列表,当用户想要从列表中删除项目时,我需要显示确认消息框,并根据用户响应我需要删除项目或者如果用户希望将其保留在列表中,请将其保留,但我的项目首先被删除,然后显示确认对话框,我尝试使用回拨但仍然没有用。如果有人遇到这种情况,请帮助我。

显示提醒的方法:

$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);
    }

存在删除项逻辑并调用show alert方法的方法

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);
                });
            }
        });
    }

1 个答案:

答案 0 :(得分: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);