AngularJS-自定义指令

简介: AngularJS的内置指令总归是有限的,特别是我们需要操纵dom时,就需要自己编写directive。有这样一个场景,管理系统中切换状态,见图1. 图1 切换状态时的确认框效果 那么就可以定义指令“ng-confirm-click”,js: html: <td> <a ctrip-confirm-click ng-show="item.statu
AngularJS的内置指令总归是有限的,特别是我们需要操纵dom时,就需要自己编写directive。

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


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

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

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>





目录
相关文章
|
2月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
JavaScript
AngularJs-03-数据的双向绑定
<!DOCTYPE html> <html lang="zh" ng-app="myapp"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.
1201 0
|
Web App开发 Java 测试技术
|
Web App开发 JavaScript 前端开发
|
JavaScript 前端开发 PHP
|
数据安全/隐私保护

热门文章

最新文章