AngularJS 指令

AngularJS では、「」と呼ばれるものを使用してコマンドの新しい属性を追加して HTML を拡張します。

AngularJS には、アプリケーションに機能を提供するための内蔵コマンドが一式あります。

AngularJS 還允許您定義自己的指示。

AngularJS 指令

AngularJS 指示是擴展的 HTML 屬性，帶有前綴 ng-。

ng-app 指示初始化 AngularJS 應用程序。

ng-init 指示初始化應用程序數據。

ng-model ディレクティブはHTMLコントロール（input、select、textarea）の値をアプリケーションデータにバインドします。

請在我們的 AngularJS 指示參考中閱讀有關所有 AngularJS 指示的信息。

インスタンス

<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>

自分で試してみてください

ng-app 指示還告訴 AngularJS，<div> 元素是 AngularJS 應用程序的“所有者”。

數據綁定

上例中的 {{ firstName }} 表達式是一個 AngularJS 數據綁定表達式。

AngularJS 中的數據綁定將 AngularJS 表達式與 AngularJS 數據進行綁定。

{{ firstName }} 與 ng-model="firstName" 綁定在一起。

在下一個例子中，兩個文本字段通過兩個 ng-model 指示綁定在一起：

インスタンス

<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>

自分で試してみてください

使用 ng-init 並不常見。你將在關於控制器的章節中學習如何初始化數據。

重複 HTML 元素

ng-repeat 指示重複 HTML 元素：

インスタンス

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

自分で試してみてください

ng-repeat 指示實際上為集合中的每個項目克隆一次 HTML 元素。

用於對象數組的 ng-repeat 指示：

インスタンス

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

自分で試してみてください

AngularJSはデータベースCRUD（作成、読み取り、更新、削除）アプリケーションに非常に適しています。

これらのオブジェクトがデータベースのレコードから来ていると想像してみてください。

ng-appディレクティブ

ng-app ng-initディレクティブはAngularJSアプリケーションのルート要素。

ウェブページが読み込まれたときにng-app ディレクティブは自動初期化（自動初期化）アプリケーションを定義します。

ng-initディレクティブ

ng-init ng-initディレクティブはAngularJSアプリケーションの初期値。

通常、ng-initを使用しません。コントローラーやモジュールを使用します。

後でコントローラーやモジュールに関する詳細な情報を学びます。

ng-modelディレクティブ

ng-model ディレクティブはHTMLコントロール（input、select、textarea）の値をアプリケーションデータにバインドします。

ng-model ディレクティブはさらに：

  • アプリケーションデータにタイプ検証（数値、メール、必須）を提供する
  • アプリケーションデータに状態（無効、汚、タッチ、エラー）を提供する
  • HTML要素にCSSクラスを提供する
  • HTML要素をHTMLフォームにバインドする

次の章で詳しく説明します。 ng-model ディレクティブの情報。

新しいディレクティブの作成

AngularJSのすべての内蔵ディレクティブに加えて、自分自身のディレクティブを作成することもできます。

新しいディレクティブは、以下のように使用して作成されます .directive 関数で作成された。

新しいディレクティブを呼び出すには、新しいディレクティブと同じタグ名を持つHTML要素を作成してください。

ディレクティブの名前を設定する際には、キャメルケース形式を使用する必要があります，w3TestDirective、しかし呼び出す際には、-で区切られた名前を使用する必要があります，w3-test-directive：

インスタンス

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>ディレクティブで作成されました！</h1>"
  });
});
</script>
</body>

自分で試してみてください

次のようにディレクティブを呼び出すことができます：

  • 要素名
  • 属性
  • クラス
  • コメント

以下の例ではすべて同じ結果が得られます：

要素名

<w3-test-directive></w3-test-directive>

自分で試してみてください

属性

<div w3-test-directive></div>

自分で試してみてください

クラス

<div class="w3-test-directive"></div>

自分で試してみてください

コメント

<!-- directive: w3-test-directive -->

自分で試してみてください

制限

あなたのインストラクションは特定のメソッドを通じてのみ呼び出すことを制限できます。

インスタンス

値を追加することで、 "A" の restrict 属性、このインストラクションは属性を通じてのみ呼び出すことができます：

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>ディレクティブで作成されました！</h1>"
  });
});

自分で試してみてください

合法な restrict 値は：

  • E 要素名を表します
  • A 属性を表します
  • C クラスを表します
  • M コメントを表します

デフォルトでは、この値は EAこれは、要素名および属性名がインストラクションを呼び出すことができることを意味します。