If you simply remove the ng-click attribute, it won't work because the click event listener will still be present. You must set the ng-click binding to null instead.
To address this issue, I developed a custom directive called click-once. This directive captures the element's click event and triggers the ng-click binding only once before removing it.
.directive('clickOnce', function() {
return {
scope: {
'ngClick': '&'
},
link: function(scope, element) {
element.bind('click', function() {
if (scope.ngClick) {
scope.ngClick();
scope.ngClick = null;
}
});
}
}
});
Here is how you can use the directive in your HTML markup:
<button click-once ng-click="doThis()">my button</button>
You can also check out the implementation on jsFiddle.