指令

ng 指令

• ng-app

<!-- ng-app: AngularJS程序开始 -->

• ng-model

<!-- 把元素值（比如输入域的值）绑定到应用程序 -->
<!-- 把first变量双向绑定到value中 -->
<input type="text" ng-model="first" placeholder="Enter a name here">

• ng-bind

<!-- 把应用程序数据绑定到 HTML 视图(ng-bind对标签不会解析直接原样输出) -->
<!-- 把innerHtml变量绑定到div视图中,相当于操作js的innerHtml -->
<div ng-bind="innerHtml"></div>
<!-- AngularJS表达式 {{}} -->
<!-- {{}} 表达式和ng-bind 使用一致 -->
<div ng-app ng-init="quantity=1;cost=5">
{{ quantity * cost }}
</div>
<div ng-app ng-init="quantity=1;cost=5">
<span ng-bind="quantity * cost"></span>
</div>

• ng-bind-html

<!-- 绑定一个变量 浏览器会解析标签 -->

• ng-bind-template

<!-- 不会解析html标签(会输出原生的标签) -->

• ng-init

<!-- 初始化 AngularJS 应用程序变量(不建议使用该方式) -->
<div ng-app="" ng-init="firstName='John';cost=12">

• ng-repeat

<!-- 循环输出 | 相当于for (参考ng-repeat链接) -->
<!-- $index ：当前索引(从0开始) -->
<!-- $first：当前是否是第一行(bool: true(是)/false(否)) -->
<!-- $middle：当前是否是中间项(如果是偶数项存在中间两项;如果是奇数项存在一项)(bool: true(中间项)/false(否)) -->
<!-- $last：当前是否最后一行(bool: true(是)/false(否)) -->
<!-- $even：当前是否是奇数行(bool: true(是)/false(否)) 根据($index+1)/2判读 -->
<!-- $odd：当前是否是偶数行(bool: true(是)/false(否)) 根据($index+1)/2判读 -->
<!-- 其他参考官方使用方法 -->

• ng-class

<!-- 控制class样式 -->
<!-- 如果标签存在class属性 那么ng-class不会覆盖之前的class属性而是追加 -->
<!-- 文档用法纠正 -->
<!-- 如果是对象时：value 应该是布尔值(key则是需要添加到class属性后的值) -->

• ng-class-even

<!-- 与 ng-repeat 配合使用 控制奇数项的class样式 -->

• ng-class-odd

<!-- 与 ng-repeat 配合使用 控制偶数项的class样式 -->

• ng-blur

<!-- 输入框失去焦点时指定 "表达式" -->

• ng-change

<!-- ng-change 指令 需要和 ng-model一起使用 -->

• ng-checked

<!-- 设置checkbox或radio是否选中 true(选中)/false(未选中) -->

• ng-cloak

<!-- 防止 AngularJS 代码未加载完而出现的问题(防止闪烁的效果问题|需要时添加) -->

• ng-controller

<!-- 为变量添加控制器 -->

• ng-copy

<!-- 在输入框或元素被复制时触发(常用于input标签) -->

• ng-cut

<!-- 输入框文本被剪切时执行 -->

• ng-csp

<!-- AngularJS 的一种安全策略 -->

• ng-click

<!-- 单击时触发 -->

• ng-dblclick

<!-- 鼠标双击时 -->

• ng-disabled

<!-- 设置表单输入字段的 disabled 属性(input、select、textarea) -->

• ng-focus

<!-- 输入框获得焦点时执行 -->

• ng-hide

<!-- 类似display:none属性 -->

• ng-href

<!-- 设置href属性值 -->

• ng-if

<!-- 指令用于表达式为false时移除HTML元素(该标签与ng-hide有所不同) -->

• ng-include

<!-- 包含外部的 HTML 文件 -->

• ng-keydown

<!-- onkeydown 事件会在用户按下一个键盘按键时发生 -->
<!-- 告诉 AngularJS 在指定 HTML 元素上【按下】按键时需要的操作 -->

• ng-keypress

<!-- onkeypress 事件会在键盘按键被按下并释放一个键时发生 -->

• ng-keyup

<!-- onkeyup 事件会在键盘按键被松开时发生 -->

• ng-list

<!-- ng-list 指令将字符串转换为数组，默认使用逗号分隔(可修改) -->

• ng-model-options
• 参数