Retrofitting "alert()" on delete buttons - angularjs

Question

I have an angular application which contains several delete buttons somewhat like this:
<button class="btn btn-default" ng-click="delete($index)">x</button>
Now as we are nearing production deployment and I want delete buttons to behave nicely and "alert()" the user before actually deleting the object.
How can I retro-fit this feature in all the delete buttons through a directive. I would like to have a directive called "ask":
<button ask class="btn btn-default btn-xs" ng-click="delete($index)">x</button>
which I can use to affect the behaviour of any button.
Somehow I am not able to think through this
app.directive("ask", function() {
return function(scope, elems, attrs) {
// what to do here:
// 1. shall I change the elems.attr("ng-click")
// 2. or scope.attrs("ngClick")
????
}
});
Please guide me with the best practice and some code samples. Also note that the ng-click callback of all the delete buttons are different and the application already makes extensive use of isolate scope and child scope directives.

Answer 1

Try this implementation
angular
.module('test', [])
.directive('ask', function() {
return {
restrict: 'A',
scope: {ask: '#', onAsk: '&'},
link: function(scope, elem, attrs) {
elem.on('click', function(e) {
if(confirm(attrs.ask)) {
scope.onAsk();
scope.$apply();
}
});
}
};
})
.controller('ItemsCtrl', function($scope) {
$scope.items = [1,2,3,4,5];
$scope["delete"] = function(index) {
$scope.items.splice(index, 1);
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="ItemsCtrl">
<ul><li ng-repeat="item in items track by $index">{{item}}
<button ask="Are you sure you want to delete item?" on-ask="delete($index)">x</button>
</li>
</ul>
</div>

Answer 2

You can build a directive for this and in template of directive have button element and the ng-click event.
Pass index and delete function as inputs to this directive.
app.directive("deleteFruit", function(){
return{
// You can also pass one more binding if you want to have a specific alert message
scope:{
index: '#', delete:'&'
},
template:'<button class="btn btn-default" ng-click="deleteFruit()">x</button>',
link: function(scope){
scope.deleteFruit = function(){
// When user clicks, first call the alert function then use the promise returned by dialog and check whether user wants to delete or not
//modal.dialog().then(function(userSelectedOption){
// If user wants to delete then go a head and call delete function on main controller
// if(userSelectedOption){
// scope.delete(scope.index);
// }
//})
scope.delete(scope.index);
}
}
}
})
MainCtrl HTML
<delete-fruit delete="delete(index)" index={{$index}}></delete-fruit>
Plunker.