AngularJS は、ディレクティブと呼ばれる新しい属性を使用して 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="https://cdn.bootcss.com/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>

インスタンスの実行 »

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