非活性(ng-disabled)にしてもaタグのボタンだとng-click動くので注意


Bootstrap のボタン

Bootstrap ベースのボタンにng-clickを記述する(form を submit しない)コードは、主に以下の 2 通りある。

1
2
<button type="button" class="btn" ng-click="handleClick()">Done</button>
<a href="#" class="btn" ng-click="handleClick()">Done</a>

どちらでも見た目は同じになるし、イベント処理はng-clickがやってくれるし、<a>のほうがコードは短くなるしって感じで、どっちも一緒なんだし<a>にしとこってノリでやってると、disabled のワナにハマるかも。

aタグの場合、ng-disabled で非活性にできるのは見た目だけ

ボタンを非活性にするための AngularJS 標準 directive に、ng-disabledがある。これを使うと、ng-disabled="true"となるときにボタンが非活性になってくれる。

1
2
<button type="button" class="btn" ng-click="handleClick()" ng-disabled="aForm.$invalid">Done</button>
<a href="#" class="btn" ng-click="handleClick()" ng-disabled="aForm.$invalid">Done</a>

ここで注意が必要なのは、<a>のほうはng-disabled="true"で非活性になっているときでも、ボタンクリックでng-clickの処理が走るという点。見た目が非活性になっているので、ng-clickのほうも制御してくれているだろうと期待して(思い込んで)しまう。

そんなわけで、<a>タグにng-disabledを使うときは注意しよう。<button type="button">に変えるか、どうしても<a>タグでいくならng-click="!aForm.$invalid && handleClick()"とかってしときましょう…。