angular指令中4種設計模式是什么

這篇文章給大家分享的是有關angular指令中4種設計模式是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

指令的功能集非常豐富，不過我們已經發現了指令的帕累托分布：使用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，下面類似的自定義click。

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();
		});
	}
});

高級模板指令

模板指令可以通過設定模板的選項來構造強大的指令，其實以上實例返回的函數就相當于模板的link函數。

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種設計模式是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！