AngularJs カスタム ディレクティブの設定方法とカスタム ディレクティブの命名規則

AngularJS はカスタム命令の機能を提供しており、この機能を通じていくつかのタグをカスタマイズして独自の開発を支援できます。次のコンテンツでは、ディレクティブと制限を使用して AngularJs でカスタム命令を設定する方法を共有します。

1. AngularJs カスタム ディレクティブ ディレクティブの制限属性の説明:

今日の公開 HTML 部分:

<h1 zym-blog></h1>

JavaScript 部分:

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : &#39;<p>hello world</p>&#39;,
		replace : true
	};
}]);

最初のパラメーターはディレクティブ名です。最初のパラメータはディレクティブ名です。2 つのパラメータはコールバック関数を含む配列です。関数の戻り値は json オブジェクトです。

restrict は命令の形式を表します。A は属性、E は要素です。 、C はクラスです。スタイルクラスの難読化を避けるために、C は推奨されません。

template はテンプレートのコンテンツであり、このカスタム属性を使用してタグに挿入されるコンテンツを示します。

replace のデフォルト値は false です。これが true の場合、このカスタム命令を使用する HTML コード内のタグがテンプレート内のタグで置き換えられることを意味します。 replace を使用する場合、テンプレートには数語だけでなく html 要素が含まれている必要があることに注意してください。含まれていない場合、Angular はエラーを報告します。

別の属性を見てみましょう。templateUrl と template を同時に使用することはできません。templateUrl は参照されるテンプレートのアドレスです。

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		templateUrl : './46-1.html',
		replace : true
	};
}]);

ここでは replace が使用されているため、templateUrl に対応するテンプレートのコンテンツには html タグ要素が含まれている必要があることに注意してください。

2. カスタム命令の標準命名規則:

ディレクティブ命令名は、[zymBlog] などのキャメルケースの命名を使用し、HTML コードで呼び出す場合は、大文字の前に水平バーを追加する必要があります。 【zymBlog】ザイムブログ】。

3. カスタム命令テンプレートの関数操作:

テンプレートは文字列だけでなく関数にすることもできます。例:

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : function(){
			return &#39;<p>赵一鸣个人技术博客</p>&#39;;
		},
		replace : true
	};
}]);

4. カスタム命令のtransclude属性:

状況があります。カスタム命令が HTML で使用されていますが、タグ内にコンテンツがあります。この場合、カスタム命令のコンテンツがタグの元のコンテンツを置き換えるので、この問題を解決するには属性を追加する必要があります (ng-transclude)。 ):

html パート:

<h1 zym-blog>赵一鸣博客http://www.zymseo.com</h1>

js パート:

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : function(){
			return &#39;<p>赵一鸣AngularJs学习笔记<span ng-transclude></span></p>&#39;;
		},
		replace : true,
		transclude : true
	};
}]);

ng-transclude の値を true に設定した後、カスタム命令内に別のタグを追加して ng-transclude を指定する必要があります。これにより、元の HTML コンテンツが配置されますタグ内はこのタグ内に！

関連する推奨事項:

AngularJS カスタム ディレクティブとディレクティブ構成アイテムを実装するためのテクニック

AngularJS でカスタム ディレクティブを作成する方法の詳細な説明

以上がAngularJs カスタム ディレクティブの設定方法とカスタム ディレクティブの命名規則の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。