Confirmation dialog with data using AngularJS

Question

I am trying to make a dialog box that confirms the user wants to proceed. The situation is this: I have a table with may events. The user can decide to delete the event.

The table is built like this:

<tbody>
    <tr ng-repeat="event in EventsCtrl.events>
        <td>
            <a ng-click="event.updateStatusDone(event.eventid)" href="#">
                <i class="delete-icon"></i>  
            </a>
        </td>
        <td>{{event.timestamp}}</td>
        <td>{{event.date}}</td>
        ...

The relevant code in the controller looks like this:

app.controller('EventController', ['$http', function($http){
    this.updateStatusDone = function(eventid){
        $http.delete(serverUrl + "/manage/event/" + eventid);
    }
}

Now I'd like to add a confirmation box (I read about modal), that will ask the user to confirm. The eventid has to be passed through.

I've tried researching a lot about modal, but they all seem to alert, without passing the data required (eventid in this case).

Does anyone have a working example? A lead, some reference to give?

Thanks in advance!

Answer 1

Here is a partial example to get you started, from something I wrote:

function createMessageBox($dialog, title, message, buttons) {
    var msgBox = $dialog.dialog({
        templateUrl: 'partials/dialogs/message_dialog.html',
        controller: 'MessageBoxController',
        backdrop: false,
        dialogClass: 'modal confirm-dialog movable',
        resolve: {
            model: function () {
                return {
                    title: title,
                    message: message,
                    buttons: buttons
                };
            }
        }
    });

    return msgBox;
}

As you can see I'm passing the title , message and buttons variables, and later using them in the message_dialog.html dialog.

Answer 2

I found the best thing so far to fit my situation here: https://stackoverflow.com/a/19930247/5459561

It actually calls my function only if accepted. One thing to keep in mind, it is not a good looking dialog box, that part still needs work.