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的更多相关文章

  1. angular学习(二):Controller定义总结

    上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到 逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识: $scope:作用域对象,仅仅是代表 ...

  2. angular学习笔记(二)-创建angular模块

    如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DO ...

  3. angular学习的一些小笔记(中)之directive

    directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta chars ...

  4. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  5. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  6. Angular之指令Directive系列

    项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...

  7. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  8. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  9. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  10. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

随机推荐

  1. NPOI 生成 excel基本设置

    //设置页眉页脚 tempSheet.Header.Center = "2017-04-27"; tempSheet.Footer.Center = "√" + ...

  2. Universal asynchronous receiver transmitter (UART)

    UART基本介绍: 通用异步收发器UART他的功能非常强大 我们只使用UART的全双工异步通信功能,使用中断接收数据. UART_RX:串行数据输入. UART_TX:串行数据输出. 硬件支持: 连接 ...

  3. [图形学] Chp9 三维几何变换--栈处理函数与矩阵管理函数的区别

    矩阵管理函数:glLoadIdentity()是把当前活动矩阵设置为单位矩阵. 栈处理函数:glPushMatrix()是将当前活动的变换矩阵复制一份,压入栈顶:glPopMatrix()是破坏当前活 ...

  4. java 重载与重写 【转】

    首先我们来讲讲:重载(Overloading) (1) 方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型. 重载Overloading是一个类中多态 ...

  5. Nodejs cluster模块深入探究

    由表及里 HTTP服务器用于响应来自客户端的请求,当客户端请求数逐渐增大时服务端的处理机制有多种,如tomcat的多线程.nginx的事件循环等.而对于node而言,由于其也采用事件循环和异步I/O机 ...

  6. Swift语法初见

    Swift语法初见 http://c.biancheng.net/cpp/html/2424.html 类型的声明: let implicitInteger = 70 let implicitDoub ...

  7. .net ElasticSearch-Sql 扩展类

    官方提供的是java sdk,并支持jdbc方式的查询结果输出;但是却没有.net sdk的支持. 开发 ElasticSearch-Sql 第三方开源项目的.net sdk,未来集成入bsf框架.( ...

  8. Java--反射的逐步理解

    层层引入反射的作用 一.类类型的概念:所有类都是对象,是Class类的实例对象,这个对象我们成为该类的类类型 1.下面是一个小的test,以产生3种方式的类类型: public class test ...

  9. WEB安全:文件上传漏洞

    文件上传漏洞过程 用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力. 一般的情况有: 上传文件WEB脚本语言,服务器的WEB容器解释并执行了用户上传的脚本,导致代码执行: ...

  10. RabbitMQ 知识总结

    RabbitMQ知识总结 AMQP协议 AMQP协议是一个提供统一消息服务的应用层标准协议,并不会受到客户端/中间件不同产品.不同开发语言等条件的影响.RabbitMQ则是基于该协议实现的. 举个例子 ...