in Angular

Angular confirm modal (angular-ui)

Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Share on Google+0Email this to someone

We can all use the native Javascript ”Confirm” dialog, but that is boring and ugly, and when we have bootstrap, we usually want to build everything with it ( when we use bootstrap).

Now to build simple as possibly directive for this, we need to have a directive that takes 1. The question you want to display.
2. The ”Yes” function you want to execute
(Next step would be to add more features like button text for yes and no, or maybe make it dynamically, cancel function etc. etc, but we do it as easy as possible)

The directive need to inject:

Then at least me I want the directive as attribute only, so let’s restrict it to that, and the 2 parameters we need to have

Then we need to bind a click event for the element that are using our directive, to open a modal with the text we want and ”Ok” function click we want to execute:

We also need to add a controller for the modal we want to use that will hold the click events and text properties:

Finish line we should have a directive and a controller for the directive and it will look like this:

 

Working example with html:

I will put the code at github as soon as possible.

Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Share on Google+0Email this to someone

Write a Comment

Comment

  1. Hi!
    Good practice, however, I have an issue when try to inject ‘confirmClick’ and ‘confirmMessge’ in the modal controller (ModalConfirmCtrl).
    Maybe, do you know why this happen the next error?

    angular.js?3437:14110 Error: [$injector:unpr] Unknown provider: confirmMessge <- confirmMessge <- ConfirmacionModalController
    http://errors.angularjs.org/1.5.9/$injector/unpr?p0=dirTituloProvider%20%3C-%20dirTitulo%20%3C-%20ConfirmacionModalController
    at eval (eval at (app.js:119), :68:12)
    at eval (eval at (app.js:119), :4554:19)
    at Object.getService [as get] (eval at (app.js:119), :4707:32)
    at eval (eval at (app.js:119), :4559:45)
    at getService (eval at (app.js:119), :4707:32)
    at injectionArgs (eval at (app.js:119), :4732:58)
    at Object.invoke (eval at (app.js:119), :4754:18)
    at $controllerInit (eval at (app.js:119), :10518:34)
    at resolveSuccess (eval at (app.js:101), :4428:34)
    at processQueue (eval at (app.js:119), :16606:28)

  2. I have been looking for good article on how to create confirm modal dialog using angular and this is perfect I have ever seen so far. Thank you!!