Intercepting ng-click in angularJS
angularjs
Solution
I've put an example directive in:
http://plnkr.co/edit/GJwK7ldGa9LY90bMuOfl?p=preview
I achieve it by creating a directive:
- with a higher `priority` than `ngClick`, so that it gets called before `ngClick`,
- making that `terminal` so that it doesn't call `ngClick`.
- listening to click events, and then evaluating the `ngClick` value if the message is ok.
As a bonus, you can pass in your own message, such as:
<a href="#" ng-click="deleteIt(id)"
confirmation-needed="Really Delete?"
>Delete with custom message</a>
The code looks like this:
app.directive('confirmationNeeded', function () {
return {
priority: 1,
terminal: true,
link: function (scope, element, attr) {
var msg = attr.confirmationNeeded || "Are you sure?";
var clickAction = attr.ngClick;
element.bind('click',function () {
if ( window.confirm(msg) ) {
scope.$eval(clickAction)
}
});
}
};
});
Problem
is it possible to write an interceptor for ng-click? I have a button or a link that leads to a deletion of an object in the backend. I'd like to have a confirmation dialog (modal) by just adding an attribute to the button/link. E.g.: ``` <a href="#" ng-click="deleteIt(id)" confirmation-needed>Delete</a> ``` Is this possible with AngularJS? Is there a better approach do solve this issue? EDIT The deleteIt method resides in different controllers. Thx