一、常见的指令:
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-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