Issue
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
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
thanngClick
, so that it gets called beforengClick
, - making that
terminal
so that it doesn't callngClick
. - 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)
}
});
}
};
});
Answered By - Piran
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.