AngularJS のディレクティブリンク関数
AngularJS のディレクティブとディレクティブリンク関数を紹介し、それらを理解するために例を見ていきます。
Angular のディレクティブリンク
ディレクティブは、HTML を DOM 要素とその子に拡張するように AngularJS に指示する DOM 要素マーカーです。
AngularJS では、ほとんどのディレクティブは ng- で始まります。ここで、ng は Angular を表します。AngularJS には多くの組み込みディレクティブがあり、アプリケーションのカスタムディレクティブを作成することもできます。
広く使用されている組み込みディレクティブには、ng-app、ng-init、ng-model、ng-bind などがあります。
ディレクティブの例を実行するために、新しい AngularJS アプリケーションを作成してみましょう。
まず、script タグを使用して AngularJS ライブラリを追加します。
# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
次に、ng-app を使用して AngularJS アプリケーションを定義します。
# AngularJs
<body ng-app="">
...
</body>
次に、ng-model ディレクティブを使用してモデル名を定義し、モデルの値を div に表示します。
# AngularJs
<input type="text" ng-model="name" />
<div class="Identity-name">
Hello {{name}}, Welcome Back!
</div>
出力：
値を入力してテストしてみましょう。
出力：
Angular のディレクティブリンク機能
次に、AngularJS でカスタムディレクティブを作成する方法を理解するための例を見て、Angular のディレクティブリンク関数について説明しましょう。
まず、AngularJS ライブラリを含むテンプレートを index.html に設定し、ng-app="my-app"を使用して AngularJS アプリケーションを定義します。アプリケーション内では、ng-controller="Controller"を使用して操作されるコントローラーについて説明します。
コントローラ内にカスタムディレクティブリンク programming-language を使用して div を作成します。
index.html のコードは次のようになります。
# AngularJs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Directive Link Function Example by Rana Hasnain Khan</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="my-app">
<div ng-controller="Controller">
<div programming-language></div>
</div>
</body>
</html>
ここで、コントローラー内の script.js で、言語の名前と最新バージョンを提供する言語のスコープを定義します。
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
directive link ク関数を使用して、ディレクティブ programming-language と関数をリンクします。言語のスコープからの値を使用してテンプレートを渡します。
script.js の最終的なコードは次のようになります。
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
.directive('programmingLanguage', function() {
return {
template: 'Name: {{language.name}} <br> Version: {{language.version}}'
};
});
})(window.angular);
出力：
このようにして、組み込みのディレクティブを簡単に使用し、テンプレートファイルで値またはテンプレートを渡すために使用できる新しいカスタムディレクティブを作成できます。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn