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

模板选项还有很多其他的选项,可参考我的其他博文,这里主要关注的是设计模式。

参考自《AngularJS高级编程》

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值