angularjsng-dialog

confirm modal using ngDialog


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


Solution

  • 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