Stopping Ng-Click From Being Fired in Angular (1.x) Directive
In the project I’m working on right now, we needed a way to disable some input fields based on a condition which is pretty common. I ended up writing a directive to reduce the amount of duplicated code and keeping it clean and simple. However, there was one problem, we didn’t use the default checkboxes. Instead, we ended up using the icons from fonts-awesome library (Checked Icon, Unchecked Icon).
Here is an example of how we implemented the checkbox:
Applying the directive on the input field doesn’t really work since it is hidden. The right thing to do is to apply the directive on the
<i> tag itself. However, disabling
<i> doesn’t do much, it will still allow clicking and thus firing off the function within
I spend hours looking for a simple solution that will do something along the lines of
event.stopPropagation() when the checkbox icon is clicked. This should be enough to prevent
ng-click being triggered.
At the end, I managed to find the solution (see below).
The problem I was facing was due to the directive is doing default postLink, and after changing it to preLink everything worked as expected.
Compile, Pre, and Post Linking in AngularJS is a good article that focuses on the execution order of Linking and Compile.