AngularJsのディレクティブの紹介 ng-clickなどを紹介!使い方

AngularJsのディレクティブの紹介 ng-clickなどを紹介!使い方

Angularjs 入門 便利なAngularjsの使い方 メリット tutorialを紹介!

はじめに

こちらの記事では、angulaJsのディレクティブの紹介をします!

AngularJsはディレクティブを使うことで、非常に便利な双方向バインディングを使うことができます!

随時追加してきます!

ちなみに下記WEBアプリはangularJsとionicをつかって作成しました!

socketなどをつかってリアルタイム双方向通信を実現しております。

こちらに関しても別記事で紹介しますね!

ディレクティブの種類

ディレクティブには2種類の使い方があります

1.ng-〜 = "expression"

こちらはディレクティブの中に直接記入する方法です。

例)ng-click =" count = count +1"

2.ng-〜="function"

こちらはディレクティブに関数を設定して、

JSファイルから関数の設定をおこないます。

詳しくはng-clickの使い方で紹介してます。

*注意点*

タグ内に複数のディレクティブに入れる場合は

expression記法もしくはfunction記法に統一する必要があります。

以下のような設定をした場合はうまく読み込まれないのでお気をつけください。

ng-init="count = 0" はexpression記法ですね

ng-glick="click()"はfunctions記法ですね

この場合別々の記法が同じ場所に入っていますので、うまく動作しません。

angularjs-directive-ng-click-ng-init

ng-clickの使い方

ng-clickはクリックイベントを紐付けることができます。

実際にindex.htmlとtest.jsで試してみましょう。

まずは、タグの中にディレクティブのng-clickを入力します。

使い方は2つあります。

①ディレクティブに直接イベントを記入

②JSファイルから$scopeを使って参照する

①ディレクティブに直接イベントを記入

直接ディレクティブにイベントを入れる場合は

ng-click="式"

とすればよい

今回はボタンをクリックすると増えるように実装する

実行結果は以下のように

②JSファイルから$scopeを使って参照する

JSファイルから$scopeで参照する場合は

ng-click = "関数名()"

とし、JSファイルから参照すればよい

今回はclick()とする

次はJSファイル

とすることで参照できる。実行結果は下記の通り

ng-initの使い方

ng-initは初期設定をすることができます。

先程のng-clickを見ていただくとクリックするまでは値がないのに気づきましたでしょうか。

こちらのng-initを使うことで最初の値を設定することができます!

同一タグ内に複数のディレクティブを入れる場合は、expressoin記法もしくはfuntion記法に統一する必要あるので、

今回はfunction記法で統一した。

実行結果はこちら

人生が変わるかも?本気でプログラミング教室に関して解説しております。


知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ!

プログラミングカテゴリの最新記事