【AngularJS】ng-modelとng-clickの処理順番の紹介

AngularJS（Angular 1.x系）フレームワークで、チェックボックスにng-modelとng-clickの両方を指定すると、フレームワークのバージョンによっては、予期した動作にならないことがあります。

原因は、フレームワークのバージョンによりng-modelとng-clickの処理順番が違うためです。正しく動作していた場合でも、フレームワークのバージョンアップにより、正しく動作しないことがあるため注意が必要です。

今回は、ng-modelとng-clickの処理順番が変更されるAngularJSフレームワークのバージョン、検証プログラム例、解決方法の紹介をしていきます。

検証環境
仕様確認
動作検証
修正方法
まとめ
参考

検証環境

検証に使用した環境／ライブラリを次に記載します。

Firefoxブラウザ
- バージョン：84.0（64ビット）
AngularJS（Angular 1.x）
- バージョン：1.3.0、1.3.1、1.6.10、1.7.0

仕様確認

公式サイトのドキュメントからバージョンによる処理順番の仕様を確認してみます。

1.3.0までは、公式サイトのドキュメントでは、ng-modelとng-clickの処理順番は、同じ優先順位が記載されています。このため、どちらが先に動作するかは決まっていません。

ng-modelの優先度については、次のように記載されています。

This directive executes at priority level 0.
https://code.angularjs.org/1.3.0/docs/api/ng/directive/ngModel

ng-clickの優先度については、次のように記載されています。

This directive executes at priority level 0.
https://code.angularjs.org/1.3.0/docs/api/ng/directive/ngClick

1.3.1からは、公式サイドのドキュメントでは、ng-modelとng-clickの処理順番は、違う優先順位が記載されています。このため、ng-click、ng-modelの順番で動作することになります。

ng-modelの優先度については、次のように記載されています。

This directive executes at priority level 1.
https://code.angularjs.org/1.3.1/docs/api/ng/directive/ngModel

ng-clickの優先度については、公式サイトでは次のように記載されています。

This directive executes at priority level 0.
https://code.angularjs.org/1.3.1/docs/api/ng/directive/ngClick

動作検証

チェックボックスにng-modelとng-clickの両方を指定して、値を表示するプログラムを作成して動作検証します。

プログラム例は、次のようになります。scriptタグに指定するバージョンを変更して動作確認を実施します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
    <script>
      var app = angular.module("exampleApp", []);
      app.controller("exampleController", function ($scope) {
        $scope.ng_model = false;
        $scope.ng_click = false;
        $scope.onClick = function () {
          $scope.ng_click = $scope.ng_model;
        };
      });
    </script>
  </head>

  <body>
    <div ng-app="exampleApp">
      <div ng-controller="exampleController">
        <div>
          <input type="checkbox" ng-model="ng_model" ng-click="onClick()" />
        </div>
        <div>ng-model：{{ng_model}}</div>
        <div>ng-click：{{ng_click}}</div>
      </div>
    </div>
  </body>
</html>

動作検証したところ、次のバージョンではng-model、ng-clickの順番で動作します。

1.3.0
1.3.1

公式ドキュメントでは、バージョン1.3.1からng-clickの処理が先に動作しそうでしたが、予期した結果にはなりませんでした。

動作検証のプログラムの実行例は、次のようになります。ng-model、ng-clickの処理順番で動作するため、同じ値が設定されます。

バージョンを段階的に最新にして動作検証したところ、次のバージョンでng-clickが先に動作する現象を確認できました。

1.7.0

動作検証のプログラム実行例は、次のようになります。ng-click、ng-modelの処理順番で動作するため、違う値が設定されます。

動作検証に使用したバージョンと動作をまとめると次のようになります。

バージョン	動作
1.3.0	`ng-model`、`ng-click`の順番で処理を実行します。
1.3.1	1.3.0と同じ動作になります。
1.6.10	1.3.0と同じ動作になります。
1.7.0	`ng-click`、`ng-model`の順番で処理を実行します。

バージョン毎の動作一覧

修正方法

チェックボックスでng-model、ng-clickを両方を指定すると、バージョンにより動作が違う結果となるため、ng-clickではなくng-changeを使用することで問題を解決することができます。

動作検証で作成したプログラム例を修正すると、次のようにチェックボックスのng-clickをng-changeへ変更することで問題を解決することができます。

<input type="checkbox" ng-model="ng_model" ng-change="onClick()" />

まとめ

チェックボックスにng-click、ng-modelの両方を指定するときは、フレームワークのバージョンにより動作が違うことがあります。

参考

フレームワークのバージョン毎の動作例を次で確認することができます。