ホームページ > 記事 > ウェブフロントエンド > AngularJS_AngularJS でのカスタム ディレクティブの使用の詳細な説明
AngularJS_AngularJS でのカスタム ディレクティブの使用の詳細な説明
- WBOYオリジナル
- 2016-05-16 15:54:281301ブラウズ
AngularJS を使用して、カスタム命令の HTML の機能を拡張します。カスタム ディレクティブで使用される「コマンド」の機能定義。カスタム ディレクティブは、アクティブ化された要素を単純に置き換えます。ブートストラップ プロセス中に、AngularJS アプリケーションは一致する要素を見つけ、カスタム ディレクティブのcompile() メソッドを使用してアクティビティを準備した後、ディレクティブのスコープベースのカスタム ディレクティブの link() メソッドを使用して要素を処理します。 AngularJS は、次の要素タイプに基づいてカスタム ディレクティブを作成するためのサポートを提供します。
- 要素ディレクティブ - 一致する要素が見つかったときにそれをアクティブにするディレクティブ。
- 属性 - - ディレクティブが見つかったときに、一致する属性をアクティブにします。
- CSS - - ディレクティブが見つかったときに、一致する CSS スタイルをアクティブにします。
- コメント - - コマンドが見つかったときに、一致するコメントをアクティブにします。
カスタム ディレクティブについて学ぶ
カスタム HTML タグを定義します。
<student name="Mahesh"></student><br/> <student name="Piyush"></student>
上記のカスタム HTML タグを処理するカスタム ディレクティブを定義します。
var mainApp = angular.module("mainApp", []);
//Create a directive, first parameter is the html element to be attached.
//We are attaching student html tag.
//This directive will be activated as soon as any student element is encountered in html
mainApp.directive('student', function() {
//define the directive object
var directive = {};
//restrict = E, signifies that directive is Element directive
directive.restrict = 'E';
//template replaces the complete element with its text.
directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
//scope is used to distinguish each student element based on criteria.
directive.scope = {
student : "=name"
}
//compile is called during application initialization. AngularJS calls it once when html page is loaded.
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
//linkFunction is linked with each element with scope to get the element specific data.
var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
スコープを更新するコントローラーをディレクティブとして定義します。ここでは、子のスコープとして name 属性値を使用します。
mainApp.controller('StudentController', function($scope) {
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.rollno = 2;
});
例
<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="StudentController">
<student name="Mahesh"></student><br/>
<student name="Piyush"></student>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('student', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
directive.scope = {
student : "=name"
}
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
mainApp.controller('StudentController', function($scope) {
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.rollno = 2;
});
</script>
</body>
</html>
結果
Web ブラウザで textAngularJS.html を開きます。結果は次のようになります:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。