Skip to content

Instantly share code, notes, and snippets.

@asafge
Created November 12, 2013 13:06
Show Gist options
  • Save asafge/7430497 to your computer and use it in GitHub Desktop.
Save asafge/7430497 to your computer and use it in GitHub Desktop.
ng-really? An AngularJS directive that creates a confirmation dialog for an action.
/**
* A generic confirmation for risky actions.
* Usage: Add attributes: ng-really-message="Are you sure"? ng-really-click="takeAction()" function
*/
angular.module('app').directive('ngReallyClick', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
var message = attrs.ngReallyMessage;
if (message && confirm(message)) {
scope.$apply(attrs.ngReallyClick);
}
});
}
}
}]);
@emw-ghertner
Copy link

Thank you!

@sampov2
Copy link

sampov2 commented May 2, 2014

@dhlavaty it's more like a logic leak. If something removes this attribute (which is rare though), this handler will still be there, and clicking the element will trigger the functionality. If this element is removed from the DOM, the click handler is cleaned up and as such, it would be cleaned up properly. I haven't seen directives or other angular code which dynamically fiddles with the existence of attributes. Taking this into consideration, this directive can be considered safe.

@dhlavaty
Copy link

dhlavaty commented May 5, 2014

In my case, I use ng-really for a delete action. I have a table with records, and each record has (in last column) a DELETE button with ng-really. When user confirms deletion, particular record is deleted from collection and Angular will "repaint" the table (a.k.a. removes the whole table row with record). And now I'm not really sure, if Angular will safely remove 'click' handler itself or not.

PS: Of course, using '$destroy' event as described above is a good practice, but I'm still wondering if I understand it correctly.

@gamikun
Copy link

gamikun commented Jul 8, 2014

Thanks :D

@neilellis
Copy link

Awesome thank you!

@spinybeast
Copy link

so easy & so awesome! thank you so much!

@javiros
Copy link

javiros commented Oct 24, 2014

+1 Thank you!

@arkka
Copy link

arkka commented Dec 3, 2014

Thanks. Very straight forward and useful.

@itmammoth
Copy link

it's really helpful!

@phonyphonecall
Copy link

Clean and simple. Thanks.

@breadcrumble
Copy link

This is great and easy to use. Thanks!

@mikethejet
Copy link

Looks good but, i dont know why but my confirm action is called twice (so http ajax) loading the page for two times... is there any reason ?
(script included only once)
áááááh the directive was included for twice time ..sorry ! ;)

@OKNoah
Copy link

OKNoah commented Mar 25, 2015

Is this available as a module through Bower?

@marianoqueirel
Copy link

hello, thank it served me.
a query, if confirmed execute an action , but if not confirmed , I just submit the form , I need to do nothing , to if
if ( message && confirm ( message) ) {
$ scope apply ( attrs.ngReallyClick ) . ;
} else {
$ scope apply ( void (0 ) ) . ;
}

I put something, so you do not run nothing but works for me , just send the form where I have incorporated ng - really- click

@vinibol12
Copy link

great job! worked perfectly!

@renatojf
Copy link

great snippet!

@maciej-gurban
Copy link

Thanks!

@fbriou
Copy link

fbriou commented Dec 8, 2015

Top! Thank you.

@nhobi
Copy link

nhobi commented Apr 6, 2016

This is so great. Thanks!

@joelgarciajr84
Copy link

Awesome man! 👍

@douglasFranco
Copy link

Beginner saved. Tnahk you!

@rkingon
Copy link

rkingon commented Aug 19, 2016

FYI - you don't need to clean this up afterwards w/ $destroy because the element that has the event listener is already being removed which also kills the bind (personally though, I would use on over bind

@yvaldez087
Copy link

Hi,
Im using a function just like this but i have an issue as other guys told, everytime l select cancel button the requested post it increments one at time, This way when l finally confirm the modal lt sends all the cumulative requests.
Someone have this issue?

@jerronimo
Copy link

thx

@f2001340
Copy link

f2001340 commented Jan 4, 2017

Thankyou! Good Stuff.

@pragyeshthakur
Copy link

Thank you somuch...

@prashantbiradar92
Copy link

nice na !!!

@muthubonzi
Copy link

confirm action is called thrice :( and ajax post is called thrice in my case, can someone help?

@dimaanj
Copy link

dimaanj commented Sep 9, 2019

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment