AngularJS内置指令

一、常见的指令：
ng-app
作用：定义了 AngularJS 应用程序的 根元素。
用法：
ng-controller
作用：用于AngularJS应用添加控制器。
用法：
ng-init
作用：为 AngularJS 应用程序定义了 初始值。
用法：
ng-cloak
作用：ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。
AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生。
用法：
ng-bind
作用：指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。
如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。
用法：
ng-repeat
作用：指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
用法：
ng-options
作用：用来循环遍历select下拉框（angular1.3新增的指令）。
用法：
ng-model
作用：绑定 HTML 元素 到应用程序数据。
用法：
ng-class
作用：可以根据你的逻辑表达式。来添加或移除对应的class。
用法：
ng-style
作用：可以根据你的逻辑表达式。来添加或移除对应的style样式。
用法：
ng-value
作用：指令用于设置 input 或 select 元素的 value 属性。
用法：
二、布尔类型的指令：
说明：这些指令通常后面接表达式为其赋值，若表达式的值非空表示true，空表示false。
1.ng-disabled
作用：指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。
用法：
2.ng-readyonly
作用：ng-readonly 指令用于设置表单域(input 或 textarea) 的 readonly 属性。
如果属性的表达式返回 true 则表单域为只读。
用法：
3.ng-checked
作用：ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。
如果属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。
用法：
4.ng-select
作用：ng-selected 指令用于设置 <select> 列表中的 <option> 元素的 selected 属性。
如果ng-selected 属性的表达式返回 true 则选项被选中。
用法：
5.ng-if
作用：表达式为 false 时移除 HTML 元素，表达式为true时插入HTML元素。
用法：
6.ng-show
作用：指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。
用法：
7.ng-hide
作用：指令在表达式为 true 时隐藏指定的 HTML 元素，否则显示指定的 HTML 元素。
用法：
三、类布尔类型的指令：
说明：通常后面也是接作用域中属性的值。它表示的是：只有当作用域中的属性生效时，href和src属性才起作用。
1.ng-href
作用：指令覆盖了原生的 <a> 元素 href 属性，是超链接目标地址href属性的扩展。
用法：
2.ng-src
作用：指令覆盖了 <img> 元素的 src 属性，是src属性的扩展。
用法：
四、事件类型的指令：
ng-click
作用：指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。
用法：
ng-change
作用：指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作（需要搭配 ng-model 指令使用）。
用法：
类似的还有ng-dblclick，ng-blur，ng-focus，ng-copy（触发条件：复制），ng-cut（触发条件：剪切），ng-paste（触发条件：粘贴）
ng-keydown，ng-keyup，ng-keypress，ng-mousedown，ng-mouseup，ng-mouseenter，ng-mouseleave，ng-mousemove，ng-mouseover等。

 

WEB前端学习交流群21 598399936