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

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站制作、網(wǎng)站建設(shè)與策劃設(shè)計(jì),靖遠(yuǎn)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:靖遠(yuǎn)等地區(qū)。靖遠(yuǎn)做網(wǎng)站價(jià)格咨詢:18980820575

指令的功能集非常豐富，不過我們已經(jīng)發(fā)現(xiàn)了指令的帕累托分布：使用angular編寫的大量指令只會(huì)用到可用性和設(shè)計(jì)模式中很小的比例，這些指令大概可以分為4類：

• 只渲染指令——這些指令將渲染作用域中的數(shù)據(jù)，但不會(huì)修改數(shù)據(jù)。

• 事件處理封裝器——這些指令將封裝事件處理程序，從而與數(shù)據(jù)綁定進(jìn)行交互，例如ngClick，這些指令不渲染數(shù)據(jù)。

• 雙向指令——這些指令既渲染數(shù)據(jù)也修改數(shù)據(jù)。

• 集合了以上3種功能的模板指令。

只渲染指令

這些指令遵守一個(gè)簡單的設(shè)計(jì)模式：它們將監(jiān)視變量并更新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(' + ')');
			});
		}
	});

事件處理封裝器

從高級(jí)別看，事件處理程序指令可以通過調(diào)用$apply函數(shù)將DOM事件與數(shù)據(jù)綁定綁定在一起，如ngClick，下面類似的自定義click。

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

雙向指令

該模式同時(shí)使用了只渲染指令和事件處理程序模式，用于創(chuàng)建控制變量狀態(tài)的指令。

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

高級(jí)模板指令

模板指令可以通過設(shè)定模板的選項(xiàng)來構(gòu)造強(qiáng)大的指令，其實(shí)以上實(shí)例返回的函數(shù)就相當(dāng)于模板的link函數(shù)。

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

模板選項(xiàng)還有很多其他的選項(xiàng)，可參考我的其他博文，這里主要關(guān)注的是設(shè)計(jì)模式。

感謝各位的閱讀！關(guān)于“angular指令中4種設(shè)計(jì)模式是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！