Angular.js, cancel ng-click event
angularjs, events, javascript
Solution
As discussed in the comments on @Flek's answer, to call a function defined in an attribute,
ui:confirm="action()"
use scope.$eval():
element.bind('click', function(event) {
scope.$eval(attrs.uiConfirm); // calls action() on the scope
});
Problem
I have this piece of html ``` <button ui:confirm ng:click="action"></button> ``` and a bit of JavaScript ``` .directive('uiConfirm', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click.confirm', function(event) { event.preventDefault(); event.stopPropagation(); }); } } }) ``` Now, what I'm trying to do, is to cancel the ng:click event, from within the directive. But the ng:click still get's triggered, no matter what I do. Demo: Fiddle Edit: By the way, causing an error within the this scope: ``` element.bind('click.confirm', function(event) { causeAnError(); event.preventDefault(); event.stopPropagation(); }); ``` Does the trick, and canceles the event propagation, but also throws and ugly error =) Edit 2: Finally I've found a solution! ``` .directive('uiConfirm', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function(event) { scope.$eval(attrs.uiConfirm); // this line of code does the magic! }); } } }) ``` Edit 3: FINAL SOLUTION ``` .directive('uiConfirm', function() { return { restrict: 'A', link: function(scope, element, attrs) { /** * Clicking the trigger start the confirmation process. */ element.bind('click.confirm', function(event) { // not confirmed? if( ! element.data().confirmed) { element.data().confirmed = true; element.addClass('btn-danger'); } // is already confirmed.. else { element.trigger('mouseout.confirm'); scope.$eval(attrs.uiConfirm); } }); /** * Leaving the element, resets the whole process. */ element.bind('mouseout.confirm', function() { // reset all values element.data().confirmed = false; element.removeClass('btn-danger'); }); // reset the whole process on the first run element.trigger('mouseout.confirm'); } } }) ``` Clicking a button the first time, gonna make it red, and doesn't trigger any action. Clicking a second time, calls the action. Leaving the button resets the whole process.