angular学习(二)-- Directive
1.2 指令:Directive
AngularJS 通过被称为 指令 的新属性来扩展 HTML,
具体表现形式一般为带有前缀 ng-xxx 的 HTML 属性。
指令的使用形式
- ng-xxx 的属性本身并不是标准中定义的属性
- 很多情况下无法通过语法校验
- HTML5 允许扩展的属性,以
data-开头 - 在 ng 中可以使用
data-ng-作为前缀来让网页对 HTML5 有效 - 二者效果相同
内置指令
AngularJS 内置了很多指令,用来增强 HTML,以下是一些常用内置指令的介绍。
ngApp
ngController
ngInit
ngBind
- ng-bind
- ng-non-bindable
ngBindHtml
ngRepeat
- ng-repeat
解决重复项报错问题
ngClass
- ng-class
- ng-class-even
- ng-class-odd
ng-cloak
ng-hide-show-if-switch
ng-src
其它常用指令
- ng-checked : 单选/复选是否选中,只是单向绑定数据
- ng-disabled : 是否禁用
- ng-readonly : 是否只读
- ng-selected : 是否选中,只是单向数据绑定
事件型指令
- ng-click :鼠标单击
- ng-blur :失去焦点
- ng-focus :得到焦点
- ng-change :发生改变
- ng-copy :拷贝完成
- ng-dblclick :鼠标双击
- ng-submit:表单提交
- ng-copy
- ng-cut
- ng-paste
- ng-keydown
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mouseover
- ng-mouseup
angular学习(二)-- Directive的更多相关文章
- angular学习(二):Controller定义总结
上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到 逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识: $scope:作用域对象,仅仅是代表 ...
- angular学习笔记(二)-创建angular模块
如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DO ...
- angular学习的一些小笔记(中)之directive
directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta chars ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- AJAX请求小项目
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决VMware虚拟机不能上网的问题
这是其中一种情况,因为使用360等加速的时候把VMware 的DHCP等服务关闭了,重新启动服务即可,方法是WIN+R 输入cmd,在doc输入services.ms打开服务,找到 把这些都启动即可
- VUE2.0+VUE-Router做一个图片上传预览的组件
之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的 ...
- MyEclipse2014web工程项目直接复制不能访问报错处理方案
在学习web servlet项目中,做一个项目时 , 完成到了某一阶段 实现了部分功能,有必要保存这一项目,当复制这个项目之后发现发布会报错或者不能访问. 其实复制项目主要是为了在以后的学习中如果能顺 ...
- Win环境下Oracle小数据量数据库的物理备份
Win环境下Oracle小数据量数据库的物理备份 环境:Windows + Oracle 单实例 数据量:小于20G 重点:需要规划好备份的路径,建议备份文件和数据库文件分别存在不同的存储上. 1.开 ...
- 如何在docker配置asp.net core https协议
本文参考自<Step by step: Expose ASP.NET Core over HTTPS with Docker> 自从微软发布.net core以来,就在许多社区掀起了讨论, ...
- Python学习笔记——import模块
OS模块 直接输出系统命令到屏幕,该方法获取的命令返回值不可被赋值给变量,输出结果受编码影响会乱码: import os os.system("ipconfig") 将执行获取的系 ...
- Socket 文件传输
服务端 1.控件:TServerSocket 2.OnClientRead事件处理 procedure TMainForm.ssClientRead(Sender: TObject; Socket: ...
- mongoDB 学习笔记纯干货(mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等)
最后更新时间:2017-07-13 11:10:49 原始文章链接:http://www.lovebxm.com/2017/07/13/mongodb_primer/ MongoDB - 简介 官网: ...
- js 数组里求最大值和最小值
// 数组里相邻两个数做比较 取满足条件的那个(以此类推) var arr = [1,3,4,5,6,7]; function Max(array){ var max = array[0]; for( ...