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>





目录
相关文章
|
8月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
前端开发 JavaScript 开发者
AngularJS 和 React区别
@[TOC](目录) AngularJS 和 React 是两个目前最为流行的前端框架之一。它们有一些共同点,例如都是基于 JavaScript 的开源框架,都能够帮助开发者构建复杂的单页面应用程序等。但也存在一些不同点,如下所述: # 1. 背景: AngularJS 由 Google 的前雇员 Misko Hevery 开发,并于 2010 年首次发布。它是一个基于 JavaScript 的前端框架,旨在简化应用程序的开发过程。React 由 Facebook 的前雇员 Mark Zuckerberg 开发,并于 2013 年首次发布。它是一个基于 JavaScript 的库,可以用于
161 0
|
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.
1230 0
|
Web App开发 JavaScript 前端开发
|
数据安全/隐私保护