AngularJS Dialogs - Confirm Dialogs

Building on my previous post about creating alert dialogs with AngularJS, here we will look at creating confirmation dialogs we can use to get confirmation from the user before completing a destructive action such as deleting something.

In the directive we add a new scope variable 'confirmPositive' with the '&' binding to allow our controller to assign a function to it. When the OK button is pressed, this function will be called. In the template we add another button - the cancel button will retain the alert behaviour and just hide the dialog whereas the OK button will call a function which hides the dialog and then calls the confirmPositive function.


In the controller we just need to add the function which will carry out our destructive action when the user clicks OK.


In our HTML we just need to add an attribute so that the function in our controller is passed to our directive.


A complete example can be found here.