モーダルを閉じる工作HardwareHub ロゴ画像

工作HardwareHubは、ロボット工作や電子工作に関する情報やモノが行き交うコミュニティサイトです。さらに詳しく

利用規約プライバシーポリシー に同意したうえでログインしてください。

イベントディレクティブ (AngularJS)

モーダルを閉じる

ステッカーを選択してください

お支払い手続きへ
モーダルを閉じる

お支払い内容をご確認ください

購入商品
」ステッカーの表示権
メッセージ
料金
(税込)
決済方法
GooglePayマーク
決済プラットフォーム
確認事項

利用規約をご確認のうえお支払いください

※カード情報はGoogleアカウント内に保存されます。本サイトやStripeには保存されません

※記事の執筆者は購入者のユーザー名を知ることができます

※購入後のキャンセルはできません

作成日作成日
2015/07/20
最終更新最終更新
2017/11/25
記事区分記事区分
一般公開

目次

    Javaが得意なエンジニア。美しいコードと効率的なデザインを追求しています。

    AngularJS のビルトインディレクティブのうちイベント関連のものをコード例とともに列挙します。公式ドキュメントはこちらです。

    イベントディレクティブ

    以下のテンプレートで ng-app="myApp" と指定していることに注意してください。

    <!DOCTYPE html>
    <html lang="ja" ng-app="myApp">
    <head>
      <meta charset="utf-8">
      <script type="text/javascript" src="angular.min.js"></script>
    </head>
    <body>
    
    ここにサンプルコードを記述
    
    </body>
    </html>
    

    ngClick

    <div ng-controller="myController">
      <input type="button" value="+10" ng-click="count=count+10">
      <input type="button" value="/2" ng-click="click()">
      <p>{{ count }}</p>
    </div>
    
    <script>
     angular.module('myApp', []).controller('myController', ['$scope', function($scope){
       $scope.count = 0;
       $scope.click = function(){
         $scope.count = $scope.count / 2;
       }
     }]);
    </script>
    

    ngDblClick

    <html lang="ja" ng-app="myApp">
    ↓
    <html lang="ja" ng-app>
    

    とした上で以下のようにします。

    <button ng-dblclick="myflag=true">ダブルクリックボタン</button>
    <p ng-show="myflag">成功</p>
    

    ngMousedown/ngMouseup/ngMouseenter/ngMouseover

    以下では ng-mousedown の例を示します。ng-mouseup, ng-mouseenter, ng-mouseover でも同様です。

    <div ng-controller="myController">
      <p ng-mousedown="mousedown()" ng-style="myStyle">マウスダウンで背景色が変化</p>
    </div>
    
    <script>
     angular.module('myApp', []).controller('myController', ['$scope', function($scope){
       $scope.mousedown = function(){
         $scope.myStyle = { 'background-color': '#fafafa' };
       }
     }]);
    </script>
    

    その他

    • ngMouseleave → マウスが要素上から離れると発火
    • ngMousemove → マウスが要素上を動くと発火
    • ngFocus → フォームが入力モードになると発火
    • ngBlur → フォームが入力モードでなくなると発火
    • ngKeydown → キーが押されると発火
    • ngKeypress → キーが押されると発火 (文字入力が発生しないカーソルキーやコントロールキーは除く)
    • ngKeyup → 押されたキーが上がると発火
    • ngChange → フォームの入力内容が変化すると発火
    • ngChecked → チェックボックスやラジオボタンでチェックを入れる
    • ngCopy → Ctrl-C などでコピーが実行されると発火
    • ngCut → Ctrl-X などで切り取りが実行されると発火
    • ngPaste → Ctrl-V などで貼り付けが実行されると発火
    • ngSubmit → フォームが送信されると発火

    コントローラ内でイベント情報を扱う

    イベントディレクティブで発火させた関数内でイベント情報を扱うことができます。

    <div ng-controller="myController">
      <button ng-click="click($event)">コンソールにイベント情報を出力</button>
    </div>
    
    <script>
     angular.module('myApp', []).controller('myController', ['$scope', function($scope){
       $scope.click = function($event){
         console.log($event);
       }
     }]);
    </script>
    

    バブリング

    AngularJS に限らずイベントが発生すると DOM ツリーの上位要素に同じイベントが伝搬します。親要素にリスナーが登録されていれば発火します。これをバブリングとよびます。子要素で発生したイベントの伝搬を抑制したい場合は以下のようにします。

    <div ng-controller="myController">
      <div ng-click="clickParent()">
        <button ng-click="propagate($event)">バブリングあり</button>
        <button ng-click="noPropagate($event)"バブリングなし</button>
      </div>
    </div>
    
    <script>
     angular.module('myApp', []).controller('myController', ['$scope', function($scope){
    
       $scope.propagate = function($event){
         console.log('clicked');
       }
       $scope.noPropagate = function($event){
         console.log('clicked');
         $event.stopPropagation();
       }
       $scope.clickParent = function(){
         console.log('propagated');
       }
     }]);
    </script>
    

    外部 HTML を読み込む (onload イベント)

    <div ng-controller="myController">
      <div ng-include="'./sub.html'"></div>
      <div ng-include="'./sub.html'" onload="myOnload()"></div>
    </div>
    
    <script>
     angular.module('myApp', []).controller('myController', ['$scope', function($scope){
       $scope.myOnload = function(){
         console.log('loaded');
       }
     }]);
    </script>
    
    Likeボタン(off)0
    詳細設定を開く/閉じる
    アカウント プロフィール画像

    Javaが得意なエンジニア。美しいコードと効率的なデザインを追求しています。

    記事の執筆者にステッカーを贈る

    有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、 記事の読者は、執筆者に有料のステッカーを贈ることができます。

    >>さらに詳しくステッカーを贈る
    ステッカーを贈る コンセプト画像

    Feedbacks

    Feedbacks コンセプト画像

      ログインするとコメントを投稿できます。

      ログインする

      関連記事

      • AngularJS 公式ドキュメントの利用例
        AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまって...
      • ルーティングを定義してシンプルな SPA を構築 (AngularJS)
        AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。 サンプルコード index.html <!DOCTYPE html> <html lang...
        カラフカラフ11/27/2017に更新
        いいねアイコン画像0
      • DOM 操作ディレクティブ (AngularJS)
        AngularJS のビルトインディレクティブのうち DOM 操作に関するものを、コード例とともに列挙します。公式ドキュメントはこちらです。 DOM 操作ディレクティブ <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <script type="...
      • フィルター (AngularJS)
        AngularJS にはモデルの値を表示用に変換するフィルタという機能があります。コマンドラインにおけるパイプのように使用します。公式ドキュメントはこちらです。 フィルターの使用例 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <...
      • HTTP 通信 (AngularJS)
        AngularJS における HTTP 通信では、XMLHttpRequest オブジェクトが利用されています。AngularJS で HTTP 通信を行うためのサンプルコードを以下に示します。公式ページはこちらです。 index.html <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <...