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

I've made a service and controller which depends of eachother:

.service('AlertService', function($uibModal){
    /*
        headerText - presents text in header
        bodyText - presents text in body
        buttonText - presents text in button. On its click if method parameters is not passed, modal will be closed.
                    In situation that the method parameters is passed, on its click, method will be called. For situations
                    like that, there is parameter buttonText2 which will be used as cancel modal functionality.
        method - presents passed function which will be called on confirmation
        buttonText2 - presents text in button for cancel

     */
    var alert = function(headerText, bodyText, buttonText, method, buttonText2){

        method = method || function(){};
        buttonText2 = buttonText2 || '';

        $uibModal.open({
            animation: true,
            templateUrl: '/static/angular_templates/alert-modal.html',
            controller: 'AlertModalInstanceCtrl',
            size: 'md',
            resolve: {
                headerText: function () {
                  return headerText;
                },
                bodyText: function () {
                  return bodyText;
                },
                buttonText: function () {
                  return buttonText;
                },
                method: function () {
                    return method;
                },
                buttonText2: function () {
                    return buttonText2;
                }
            }
        });
    };

    return{
        alert: alert
    };

})
.controller('AlertModalInstanceCtrl', function ($scope, $uibModalInstance, headerText, bodyText, buttonText, method, buttonText2) {
    $scope.headerText = headerText;
    $scope.bodyText = bodyText;
    $scope.buttonText = buttonText;
    $scope.method = method;
    $scope.buttonText2 = buttonText2;

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

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

and html file:

    
{[{ headerText }]}


    
{[{ bodyText }]}


    {[{ buttonText2 }]}
    {[{ buttonText }]}

Now, depending for what type you want to use it, you have a few options: -If you pass headerText, bodyText and buttonText, it will behave like a classic alert modal

AlertService.alert('Some header', 'Some message', 'Text button');

-If you pass headerText, bodyText, buttonText and method, it will behave like a classic alert modal but with the function which you can pass and later handle in the controller

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound);

$scope.createRound = function(){
//do something
}

-And the last one. If you pass all the parameters, it will act like the previous one, just with the possibility to cancel and close modal.

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound, 'Cancel');

$scope.createRound = function(){
//do something
}

Of course, if you want to use this, you'll have to inject angular ui bootstrap. I wasted a lot of time to develop this, but it worth. It was annoying to create every time a new controller, new template and all the other things.

From the controller then you can easily use it, just inject it first.