AngularJS-自定义指令

最新推荐文章于 2024-11-11 12:43:45 发布

原创最新推荐文章于 2024-11-11 12:43:45 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

天天开心

网站前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何在AngularJS中创建自定义指令“ng-confirm-click”来实现带有确认提示的点击事件。该指令能根据不同条件显示不同的确认消息，并在用户确认后调用相应的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS的内置指令总归是有限的，特别是我们需要操纵dom时，就需要自己编写directive。

有这样一个场景，管理系统中切换状态，见图1.

图1 切换状态时的确认框效果

那么就可以定义指令“ng-confirm-click”，js：

'use strict';

//directive名字必须使用小驼峰命名法，如 ctripConfirmClick与标签中的ctrip-confirm-click属性对应。
angular.module('cepWebApp').directive('ctripConfirmClick',  function() {
	return {
		//A:指令为标签的属性
		restrict : 'A',
		//link:作用在ng的链接阶段
		//scope:我们经常需要在指令中访问scope对象，以便观察数据模型的值
		//element:指向jquery包装后的DOM元素
		//attrs：元素的属性集合
		link : function(scope, element, attrs) {
			//为元素绑定click()事件，jQuery用法
			element.bind('click', function() {
				var message = '确认启用规则？';
				if (attrs.ngShow.indexOf('==') > 0)
					message = '确认停用规则？';
				if (confirm(message)) {
					scope.$apply(attrs.ctripConfirmClickFn);
				}
			});
		}
	};
} );

html：

<td>
	<a ctrip-confirm-click ng-show="item.status == 'on'" class="btn btn-success" ctrip-confirm-click-fn="stopOrStartRule(item)" >
		停用
	</a>
	<a ctrip-confirm-click ng-show="item.status != 'on'" class="btn btn-default" ctrip-confirm-click-fn="stopOrStartRule(item)" >
		启用
	</a>
</td>