Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
}
});
}
}
}]);
@BobbyCannon

This comment has been minimized.

Copy link

@BobbyCannon BobbyCannon commented Jan 23, 2014

This is awesome! Thank you so much.

@asafge

This comment has been minimized.

Copy link
Owner Author

@asafge asafge commented Mar 8, 2014

Sure man, no problem

@gobijan

This comment has been minimized.

Copy link

@gobijan gobijan commented Apr 15, 2014

nice! should be built in.

@naureen-34

This comment has been minimized.

Copy link

@naureen-34 naureen-34 commented Apr 21, 2014

this is amazing, thank you.

@dhlavaty

This comment has been minimized.

Copy link

@dhlavaty dhlavaty commented Apr 25, 2014

Maybe a beginners question, but doesn't .bind() in this case cause a memory leak ?

Angular docs says: "Best Practice: Directives should clean up after themselves. You can use element.on('$destroy', ...) or scope.$on('$destroy', ...) to run a clean-up function when the directive is removed. "

@asafge

This comment has been minimized.

Copy link
Owner Author

@asafge asafge commented Apr 26, 2014

I guess it's possible to do something like this, haven't tested it though.

scope.$on('$destroy', function() {
    element.off('click');
});
@dhlavaty

This comment has been minimized.

Copy link

@dhlavaty dhlavaty commented Apr 28, 2014

@asafge -> Yes, this is a possible solution. But question is: Is it a memory leak, or not ?

@emw-ghertner

This comment has been minimized.

Copy link

@emw-ghertner emw-ghertner commented Apr 30, 2014

Thank you!

@sampov2

This comment has been minimized.

Copy link

@sampov2 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

This comment has been minimized.

Copy link

@dhlavaty 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

This comment has been minimized.

Copy link

@gamikun gamikun commented Jul 8, 2014

Thanks :D

@neilellis

This comment has been minimized.

Copy link

@neilellis neilellis commented Jul 22, 2014

Awesome thank you!

@spinybeast

This comment has been minimized.

Copy link

@spinybeast spinybeast commented Oct 16, 2014

so easy & so awesome! thank you so much!

@javiros

This comment has been minimized.

Copy link

@javiros javiros commented Oct 24, 2014

+1 Thank you!

@arkka

This comment has been minimized.

Copy link

@arkka arkka commented Dec 3, 2014

Thanks. Very straight forward and useful.

@itmammoth

This comment has been minimized.

Copy link

@itmammoth itmammoth commented Dec 3, 2014

it's really helpful!

@phonyphonecall

This comment has been minimized.

Copy link

@phonyphonecall phonyphonecall commented Jan 8, 2015

Clean and simple. Thanks.

@breadcrumble

This comment has been minimized.

Copy link

@breadcrumble breadcrumble commented Feb 26, 2015

This is great and easy to use. Thanks!

@mikethejet

This comment has been minimized.

Copy link

@mikethejet mikethejet commented Mar 16, 2015

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

This comment has been minimized.

Copy link

@OKNoah OKNoah commented Mar 25, 2015

Is this available as a module through Bower?

@marianoqueirel

This comment has been minimized.

Copy link

@marianoqueirel marianoqueirel commented Apr 26, 2015

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

This comment has been minimized.

Copy link

@vinibol12 vinibol12 commented May 4, 2015

great job! worked perfectly!

@renatojf

This comment has been minimized.

Copy link

@renatojf renatojf commented May 13, 2015

great snippet!

@maciej-gurban

This comment has been minimized.

Copy link

@maciej-gurban maciej-gurban commented Jul 3, 2015

Thanks!

@fbriou

This comment has been minimized.

Copy link

@fbriou fbriou commented Dec 8, 2015

Top! Thank you.

@gr33k01

This comment has been minimized.

Copy link

@gr33k01 gr33k01 commented Apr 6, 2016

This is so great. Thanks!

@joelgarciajr84

This comment has been minimized.

Copy link

@joelgarciajr84 joelgarciajr84 commented Jun 16, 2016

Awesome man! 👍

@douglasFranco

This comment has been minimized.

Copy link

@douglasFranco douglasFranco commented Jun 23, 2016

Beginner saved. Tnahk you!

@rkingon

This comment has been minimized.

Copy link

@rkingon 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

This comment has been minimized.

Copy link

@yvaldez087 yvaldez087 commented Aug 31, 2016

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

This comment has been minimized.

Copy link

@jerronimo jerronimo commented Oct 25, 2016

thx

@f2001340

This comment has been minimized.

Copy link

@f2001340 f2001340 commented Jan 4, 2017

Thankyou! Good Stuff.

@pragyeshthakur

This comment has been minimized.

Copy link

@pragyeshthakur pragyeshthakur commented Mar 2, 2017

Thank you somuch...

@prashantbiradar92

This comment has been minimized.

Copy link

@prashantbiradar92 prashantbiradar92 commented Mar 10, 2017

nice na !!!

@muthubonzi

This comment has been minimized.

Copy link

@muthubonzi muthubonzi commented Jul 1, 2017

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

@Dmitriynj

This comment has been minimized.

Copy link

@Dmitriynj Dmitriynj commented Sep 9, 2019

Thanks

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