Prepare your HTML
First, start off with a blank HTML page.
Create a link that you would like to run a function() on when clicked and confirmed.
It should look something like this:
<a href="#" ng-click="shoutOut()">Shout!</a>
Lets add a couple of custom attributes that describes what we want to do with it.
<a href="#" ng-click="shoutOut()" confirmation-needed="Do you really want to
shout?">Shout!</a>
We've added confirmation-needed to define a custom message to be displayed when we want the user to confirm the results.
Function
With your HTML already looking like how it should look like, lets create the function
assuming your code lives in a Angular Controller
app.controller('wooCtrl', function($scope){
$scope.shout = function() {
alert('YO MR WHITE!');
};
});
Directive
Now, lets tell Angular how to handle the custom attribute 'confirmation-needed' by writing a custom directive. If you are a little lost at this stage, maybe this introduction to directives video could help..
app.directive('confirmationNeeded', function () {
return {
priority: 1,
link: function (scope, element, attr) {
var msg = attr.confirmationNeeded || "Are you sure?";
var clickAction = attr.ngClick;
element.bind('click',function (e) {
scope.$eval(clickAction) if window.confirm(msg)
e.stopImmediatePropagation();
e.preventDefault();
});
}
};
});