はじめに
こちらの記事では、angulaJsのディレクティブの紹介をします！
AngularJsはディレクティブを使うことで、非常に便利な双方向バインディングを使うことができます！
随時追加してきます！
ちなみに下記WEBアプリはangularJsとionicをつかって作成しました！
socketなどをつかってリアルタイム双方向通信を実現しております。
こちらに関しても別記事で紹介しますね！
ディレクティブの種類
ディレクティブには2種類の使い方があります
１．ng-〜 = "expression"
こちらはディレクティブの中に直接記入する方法です。
例）ng-click =" count = count +1"
２．ng-〜="function"
こちらはディレクティブに関数を設定して、
JSファイルから関数の設定をおこないます。
詳しくはng-clickの使い方で紹介してます。
＊注意点＊
タグ内に複数のディレクティブに入れる場合は
expression記法もしくはfunction記法に統一する必要があります。
以下のような設定をした場合はうまく読み込まれないのでお気をつけください。
ng-init="count = 0" はexpression記法ですね
ng-glick="click()"はfunctions記法ですね
この場合別々の記法が同じ場所に入っていますので、うまく動作しません。
ng-clickの使い方
ng-clickはクリックイベントを紐付けることができます。
実際にindex.htmlとtest.jsで試してみましょう。
まずは、タグの中にディレクティブのng-clickを入力します。
使い方は2つあります。
①ディレクティブに直接イベントを記入
②JSファイルから$scopeを使って参照する
①ディレクティブに直接イベントを記入
直接ディレクティブにイベントを入れる場合は
ng-click="式"
とすればよい
今回はボタンをクリックすると増えるように実装する
|
1 2 3 4 5 |
<button ng-click="count = count + 1"> count:{{count}} </buton> <!-- ↑{{}}の中を参照してくれる --> |
実行結果は以下のように
②JSファイルから$scopeを使って参照する
JSファイルから$scopeで参照する場合は
ng-click = "関数名()"
とし、JSファイルから参照すればよい
|
1 2 3 4 |
<button ng-click="click()"> count:{{count}} </buton> <!-- ↑{{}}の中を参照してくれる --> |
今回はclick()とする
次はJSファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//Moduleの作成！ var myApp = angular.module('mytestApp',[]); //Moduleの中にcontrollerを指定（複数指定できる) myApp.controller('MyTestController',['$scope',function($scope) { var x = 0; //↓ clcik()関数を読み込み $scope.click = function(){ x++; console.log(x); //HTMLの{{count}}の呼び出し $scope.count = x; }; }]); |
とすることで参照できる。実行結果は下記の通り
ng-initの使い方
ng-initは初期設定をすることができます。
先程のng-clickを見ていただくとクリックするまでは値がないのに気づきましたでしょうか。
こちらのng-initを使うことで最初の値を設定することができます！
|
1 2 3 4 5 6 |
<body ng-controller="MyTestController"> <!-- ↑コントローラーを指定 as を書かない方法--> <button ng-init="init()" ng-click="click()"> count:{{count}} </buton> |
同一タグ内に複数のディレクティブを入れる場合は、expressoin記法もしくはfuntion記法に統一する必要あるので、
今回はfunction記法で統一した。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
myApp.controller('MyTestController',['$scope',function($scope) { var x = 0; $scope.init = function(){ $scope.count = "初期設定だよ！"; }; //↓ clcik()関数を読み込み $scope.click = function(){ x++; console.log(x); //HTMLの{{count}}の呼び出し $scope.count = x; }; |
実行結果はこちら
人生が変わるかも？本気でプログラミング教室に関して解説しております。
知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ！
