Angular 命令の 4 つのデザイン パターンに関する簡単な説明

この記事では、angular ディレクティブの 4 つの設計パターンを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

[関連する推奨事項: "angular チュートリアル "]

ディレクティブの関数セットは非常に豊富ですが、次のことがわかりました。パレート分布: Angular で書かれた多数の命令は、ユーザビリティとデザイン パターンのほんの一部しか使用しません。これらの命令は、おおまかに 4 つのカテゴリに分類できます:

• レンダリング命令のみ - これらの命令スコープ内のデータはレンダリングされますが、変更されません。
• イベント処理ラッパー - これらのディレクティブは、ngClick などのデータ バインディングと対話するイベント ハンドラーをカプセル化します。これらのディレクティブはデータをレンダリングしません。
• 双方向命令 - これらの命令はデータのレンダリングと変更の両方を行います。
• 上記の 3 つの機能を組み合わせたテンプレート命令です。

レンダリング ディレクティブのみ

これらのディレクティブは単純な設計パターンに従います。変数を監視し、DOM 要素を更新して、 ngClass 、ngBind などの変数の変更を反映します。 。

angular.module('app', []).
	directive('myBackgroundImage', function () {
		return function (scope, element, attrs) {
			scope.$watch(attrs.myBackgroundImage, function (newVal, oldVal) {
				element.css('background-image', 'url(' + ')');
			});
		}
	});

イベント処理ラッパー

高レベルでは、イベント ハンドラー ディレクティブは、$apply 関数を呼び出すことで DOM イベントをデータ バインディングにバインドできます。ngClick など、次のようなものです。同様のカスタムクリック。

angular.module('app', []).
directive('myNgClick', function () {
	return function (scope, element, attrs) {
		element.click(function () {
			scope.$eval(attrs.myNgClick);
			scope.$apply();
		});
	}
});

双方向ディレクティブ

このモードは、レンダリング専用ディレクティブとイベント ハンドラー モードの両方を使用して、変数の状態を制御するディレクティブを作成します。

angular.module('app', []).
directive('myNgClick', function () {
	return function (scope, element, attrs) {
		//监视和更新
		scope.$watch(attrs.toggleButton, function (v) {
			element.val(!v ? 'Disable' : 'Enable');
		});
 
		//事件处理程序
		element.click(function () {
			scope[attrs.toggleButton] = 
				!scope[attrs.toggleButton];
			scope.$apply();
		});
	}
});

高度なテンプレート命令

テンプレート命令では、テンプレート オプションを設定することで強力な命令を構築できます。実際、上記の例で返される関数は、次のリンク関数と同等です。テンプレートです。

angular.module('app', []).
directive('imageCarousel', function () {
	return {
		templateUrl: 'view/index.html',
		controller: carouselController,
		scope: {},
		link: function (scope, element, attrs) {
			scope.$parent.$watch(attrs.imageCarousel, function (v){
				scope.images = v;
			});
		}
	}
});

テンプレート オプションには他にも多くのオプションがあります。私の他のブログ投稿を参照してください。ここでの主な焦点はデザイン パターンです。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がAngular 命令の 4 つのデザイン パターンに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。