AngularJS ディレクティブ

AngularJS は、Directives と呼ばれる新しい属性で HTML を拡張します。

AngularJS は、組み込みディレクティブを通じてアプリケーションに機能を追加します。

AngularJS を使用すると、ディレクティブをカスタマイズできます。

AngularJS ディレクティブ

AngularJS ディレクティブは、ng- というプレフィックスが付いた拡張 HTML 属性です。

ng-app ディレクティブは、AngularJS アプリケーションを初期化します。

ng-init コマンドはアプリケーションデータを初期化します。

ng-model ディレクティブは、要素の値 (入力フィールドの値など) をアプリケーションにバインドします。

完全な手順の内容については、AngularJS リファレンスマニュアルを参照してください。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ng-app このディレクティブは、<div> 要素が「所有されている」ことを AngularJS に伝えます。 AngularJS アプリケーション「By」。

	Web ページには、さまざまな要素で実行される複数の AngularJS アプリケーションを含めることができます。

データバインディング

上記の例の {{ firstName }} 式は、AngularJS データバインディング式です。

AngularJS のデータバインディングは、AngularJS 式と AngularJS データを同期します。

{{ firstName }} は ng-model="firstName" を通じて同期されます。

次の例では、2 つのテキストフィールドが 2 つの ng-model ディレクティブを通じて同期されています:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div data-ng-app="" data-ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p><b>总价:</b> {{quantity * price}}</p>

</div>

</body>
</html>

Run Instance»

オンラインの例を表示するには、[Run Instance] ボタンをクリックします

	ng-init の使用はあまり一般的ではありません。データを初期化するより良い方法については、「コントローラー」の章で説明します。

元 HTML 要素を繰り返す

Ng-Repeat

HTML 要素を繰り返す命令:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li data-ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

</body>
</html>

サンプルを実行する » オンラインインスタンスを表示するには、[サンプルを実行] ボタンをクリックします

Ng-繰り返します この命令はオブジェクト配列で使用されます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>

インスタンスを実行する»「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

完璧にサポートデータベースの CRUD (作成、読み取り、更新、削除の増加) アプリケーション。

ng-app ディレクティブ

ng-app ディレクティブは、AngularJS アプリケーションの root 要素 を定義します。

ng-app コマンドは、Web ページが読み込まれるときにアプリケーションを 自動的に起動 (自動的に初期化) します。

後で、ng-app が値 (ng-app="myModule" など) を介してコードモジュールに接続される方法を学びます。

ng-init ディレクティブ

ng-init ディレクティブは、AngularJS アプリケーションの 初期値 を定義します。

通常、ng-initは使用されません。代わりにコントローラーまたはモジュールを使用します。

コントローラーとモジュールについては後ほど詳しく説明します。

ng-model ディレクティブ

ng-model ディレクティブ HTML 要素 をアプリケーションデータにバインドします。

ng-model ディレクティブは次のこともできます:

アプリケーションデータの型検証 (数値、電子メール、必須) を提供します。
アプリケーションデータのステータス (無効、ダーティ、タッチ、エラー) を提供します。
HTML 要素の CSS クラスを提供します。
HTML 要素を HTML フォームにバインドします。

ng-repeat ディレクティブ

ng-repeat ディレクティブは、コレクション (配列) 内の項目ごとに HTML 要素を 1 回ずつ複製します。

カスタムディレクティブを作成する

AngularJS の組み込みディレクティブに加えて、カスタムディレクティブも作成できます。

.directive

関数を使用してカスタムディレクティブを追加できます。カスタム命令を呼び出すには、HTML要素にカスタム命令名を追加する必要があります。

ディレクティブに名前を付けるにはキャメルケースを使用します。

phpDirective

ですが、使用する場合は-で分割する必要があります。php-directive:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Run Instance»
をクリック「インスタンスの実行」ボタンをクリックしてオンライン例を表示します

次の方法でコマンドを呼び出すことができます:

要素名

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

属性

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<div php-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

インスタンスを実行します »
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

クラス名

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<div class="php-directive"></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "C",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

メモ

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<!-- directive: php-directive -->

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックして表示しますのオンラインインスタンス

使用制限

コマンドを特定の方法でのみ呼び出すように制限できます。

インスタンス

に restrict 属性を追加し、値を "A" に設定します。コマンドを設定するには、属性を通じてのみ呼び出すことができます:

インスタンス

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<div php-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください

制限値は次のとおりです。次のようになります: