淺談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，下面類似的自訂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種設計模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！