Alert and Confirm pop up using BootBox in AngularJS

Alerts and confirmation dialog boxes are very integral part of any kind of applications. Applications built using AngularJS are no exception. I have used BootBox in my applications. I decided to create an AngularJS service to wrap BootBox to create alert and prompt dialog boxes. Technically I could have used BootBox directly from my controllers or directives. But this means I have a hard dependency on BootBox for displaying these dialog boxes. Therefore it was obvious choice to build a service that will wrap third party library and then inject that service as dependency in controllers, directives or wherever needed.

AngularJS service to wrap BootBox

    WebPortal.factory('dialogBoxService', [function() {
    var dialogType = {alert:1, confirm:2, prompt:3, custom:999};
    var show = function (type, title, message, footer, callback) {
        var options = {
            title: title,
            message: message
        };
        switch (type) {
            case dialogType.confirm:
                options.buttons = {
                    cancel: {
                        label: "Cancel",
                        className: "btn-default",
                        callback: function(result) {
                            callback(false);
                        }
                    },
                    main: {
                        label: "OK",
                        className: "btn-primary",
                        callback: function (result) {
                            callback(true);
                        }
                    }
                };
                break;
            case dialogType.alert:
            default:
                options.buttons = {
                    main: {
                        label: "OK",
                        className: "btn-primary"
                    }
                };
                break;
        }
        bootbox.dialog(options);
    };
    return {
        dialogType: dialogType,
        show: show
    };
}]);

The service uses BootBox's custom dialog function to raise alert and confirm dialog box. The fact of the matter is that behind the scene all BootBox short cut methods, alert, prompt and confirm call dialog method by setting up appropriate options.

Using BootBox Angular service

Following code from one of the controllers shows use of the angular service wrapping BootBox. The last parameter for show function is call back function. This function gets called after user dismisses confirm dialog box.

        var getSupplyDemandData = function () {
            reportsApi.getSupplyDemand().
                then(
                    function (response) {
                        $scope.supplyDemand = response.data.Data;
                        dialogBoxService.show(dialogBoxService.dialogType.confirm,
                            'Report Data Load',
                            "Data has been loaded for demand supply. Do you want to accept it?", "",
                            onDataLoaded);
                    },
                    function (response) {
                    }
                );
        };
        var onDataLoaded = function(result) {
            if (!result) {
                // Discard incoming data.
            }
        };