confirm modal using ngDialog

Question

I am using ngDialog in my application and I would like to create a generic confirm modal , which I can use whenever I need , the confirm message is going to be different .

My questions :

1- Is creating a directive with the ngDialog functionality a good idea and what is its design ?

2- what is the difference between confirm() and openConfirm() in ngDialog code .

Thanks in advance

Answer 1

Well, to answer your questions,

1 - You can create a directive for it, having a scope, say type to which you pass the confirmation type ( i.e. submit for submit confirmations, delete for delete confirmations) and the directive should render the message based on the type you specified.

2 - openConfirm() is a type of ngDialog, which can only be closed by confirming the action (unlike ngDialog.open()), so you don't have the ability here to close the dialog when clicking anywhere in theDOM. confirm() is just a method you use to close the dialog, you use this method to close the dialog and resolve the promise that was returned when opening the modal, so it can go on <button ng-click="confirm()">Confirm</button> inside your dialog.

Hope this helped you

Update

openConfirm() Opens a dialog that by default does not close when hitting escape or clicking outside the dialog window. The function returns a promise that is either resolved or rejected depending on the way the dialog was closed.

To resolve the promise, your dialog should be like this:

With ngDialog controller

ngDialog.openConfirm({
    template: '<div></div>',
    controller: ['$scope', function($scope) { 
      // Controller logic here
    }]
}).then(function (success) {
    // Success logic here
}, function (error) {
    // Error logic here
});

With directive controller

ngDialog.openConfirm({
    template: '<div></div>',
    scope: $scope, // <- ability to use the scopes from directive controller
}).then(function (success) {
    // Success logic here
}, function (error) {
    // Error logic here
});

You can use your directive controller as long as you pass scope: $scope inside the dialog

Here is a demo showing you how you can use type

Try switching the type in index.html from confirm to remove and see the updated content and button text in the dialog