AngularJS カスタムディレクティブ

投稿日：2017年3月21日更新日：2020年5月10日

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。

これをオリジナルで自作することができます。

customer_directive.js

var appDirective = angular.module('appDirective', [])
.directive('myDirective', function(){
  return {
    template: '<p>本日は晴天なり</p>'
  }; 
});

var appDirective = angular.module('appDirective', [])

.directive('myDirective', function(){

return {

template: '<p>本日は晴天なり</p>'

};

});

index.html

<html ng-app="appDirective">                                        
<head>                                                          
<script type="text/javascript" src="angular.min.js"></script>   
<script type="text/javascript" src="customer_directive.js"></script>      
</head>                                                         
<body>                                   
<div my-directive></div>
<!-- ここにカスタムディレクティブで指定したHTMLが表示されます。 -->                                     
</body>                                                         
</html>

<head>

</head>

<body>

</body>

</html>

AngularJSのDirectiveを理解する.

これを踏まえて、例えばある入力欄でEnterキーを押したときに特定のクラスをもった入力欄に移動するというイベントをHTML要素に付与したいとします。

主に入力欄が表のようになっているテーブル形式のHTMLを考えます。

<tr>
   <td><input type="text" class="move_target" value="" name="hoge1" move-focus></td>
</tr>
<tr>
    <td><input type="text" class="move_target" value="" name="hoge2" move-focus></td>
</tr>

<tr>

</tr>

<tr>

</tr>

var appDirective = angular.module('appDirective',[])
.directive('moveFocus', function(){
    return function(scope, element, attrs) {    
        element.bind("keydown keypress", function (event) {
             var targetElementsCondition = "input.move_target";
             var keyCode = event.which || event.keyCode;
             if ( keyCode === 13 ) {
                 //移動対象の要素をこれで取得します。
                 var $list = $(targetElementsCondition);
                  //自分の番地はindex(this)で判定します。
                  var num = $list.index(this);
                  var target = num + 1;
                  if( target < $list.length ){ 
                    //これが移動したい先のhtml
                    $list[target].select();
                     event.preventDefault();  
                  } 
              }
          });     
      };
});

var appDirective = angular.module('appDirective',[])

.directive('moveFocus', function(){

return function(scope, element, attrs) {

element.bind("keydown keypress", function (event) {

var targetElementsCondition = "input.move_target";

var keyCode = event.which || event.keyCode;

if ( keyCode === 13 ) {

//移動対象の要素をこれで取得します。

var $list = $(targetElementsCondition);

//自分の番地はindex(this)で判定します。

var num = $list.index(this);

var target = num + 1;

if( target < $list.length ){

//これが移動したい先のhtml

$list[target].select();

event.preventDefault();

}

});

};

});

(AngularJS, JQuery) Enterキーでフォーカスを遷移させるディレクティブを作る

JavaScript(AngularJS)で次のフォームへ自動で移動させる