AngularJS内置指令

原创 小糖心 随笔 angular 253阅读 2017-12-29 15:52:22 举报

一、常见的指令:

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等。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复