Bootstrap alert message represented as modal, angular

Question

Bootstrap 3 provides Bootstrap: event messages: success, info, warning, danger.

However sometimes the view doesn\'t have enough space to show up

Answer 1

Thanks for answering your own question, it was helpful.

Here's a version as a service you can wire in and fire off from any controller without needing to include directive mark-up.

It uses the latest angular UI Bootstrap paradigm for modals.

It has some convenience methods (info, error, warn, success).

It fires off an event when closed with the data as an event argument in case you need to know that.

Enjoy!

angular.module('modal.alert.service', [], function ($provide) {
    'use strict';
    $provide.factory('ModalAlertService', ['$rootScope', '$uibModal', 
                                           function ($rootScope, $uibModal) {

        var factory = {
            alert: function(mode, title, text) {

                var modalData = {
                    mode : mode,
                    title : title,
                    text : text
                };

                var modalInstance = $uibModal.open({
                    template: '
' +
                        '
' +
                        '' +
                        '' +
                        '{{data.title}}:   {{data.text}}
',
                    controller : 'ModalAlertController',
                    backdrop : true,
                    keyboard : true,
                    backdropClick : true,
                    size : 'lg',
                    resolve : {
                        data : function() {
                            return modalData;
                        }
                    }
                });

                modalInstance.result.then(function(data) {
                    $rootScope.$broadcast('modal-alert-closed', { 'data' : data });
                });

            },
            info: function(title, text) {
                factory.alert('info', title, text);
            },
            error: function(title, text) {
                factory.alert('danger', title, text);
            },
            warn: function(title, text) {
                factory.alert('warning', title, text);
            },
            success: function(title, text) {
                factory.alert('success', title, text);
            }
        };

        return factory;

    }]);
}).controller('ModalAlertController', function ($scope, $uibModalInstance, data) {
    $scope.data = data;

    $scope.close = function() {
        $uibModalInstance.close($scope.data);
    };
});