Combining Bootstrap with AngularJS, I encounter an issue in my application where a link triggers a modal dialog using data attributes. My goal is to disable the button based on a state variable or function.
The problem arises when AngularJS still executes the function doSomething() even if the button is disabled with ng-disabled. To work around this, I created a guard that checks the same variable as in ng-disabled, preventing the function from triggering.
However, the modal dialog still opens because the data-* attributes do not respect
ng-disabled</code but instead rely on the CSS class <code>disabledng-class</code. Are you following along? :-)</p>
<p><strong>This is how my current code appears:</strong></p>
<pre><code><a href="#showModalDialog" class="btn btn-success btn-md" ng-class="{ 'disabled': !isSomeState() }" data-toggle="modal"
ng-click="!isSomeState() || doSomething()" ng-disabled="!isSomeState()">
<span class="fa fa-foobar"></span>
</a>
Bootstrap's disabled class sets pointer-events: none; effectively disabling clicking. However, it also removes the forbidden sign cursor indicating a disabled control, disrupting user interface consistency.
Is there a solution for these requirements:
- Visually disable the button,
- Show a forbidden sign cursor on mouse-over,
- Avoid executing
ng-clickfunction when the button is disabled, - Prevent the modal dialog from opening.
Keeping it simple since it's Christmas, I'm seeking a straightforward solution without major rewrites to Bootstrap or AngularJS, considering the numerous modal dialogs in use.