So this is a quick, not too serious post about a problem I ran into a couple days ago that I think is worth writing down.
I am a huge fan of Twitter Bootstrap as I think it gives you so much to work with right out of the gates. I hit a snag a couple days ago when I was trying to apply ng-disabled to an anchor tag.
In Twitter Bootstrap it is super easy to apply their .btn class to just about anything. Their docs give me permission so why wouldn’t I!?
Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.
So when I applied ng-disabled=”true” to my freshly minted button it would fade out but I was still able to click through. Ummmmm… what the deal?
So here is the story on why this happens. Form controls have a disabled property on them but anchor tags do not. Therefore, ng-disabled has nothing to actually pin itself on.
So the fix is super easy once I figured out what was going on.
<a class="btn btn-primary" ng-disabled="checked" ng-click="handleClick()">ANCHOR</a>
<button class="btn btn-primary" ng-disabled="checked" ng-click="handleClick()">BUTTON</button>
And bam! Disaster averted. And by ‘disaster averted’ I mean I got this fixed before QA busted me.
Here is a more comprehensive fiddle illustrating my experience.