【JS-task8】

angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

分享人：关楠

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

AngularJS 通过被称为"指令(directive)"的新属性来扩展 HTML。

AngularJS 有许多内置的指令来为应用添加功能

通俗点说就是 AngularJS 将指令与DOM绑定在一起，再扩展指令的行为，最后实现修改HTML的功能

AngularJS 的内置指令均有ng-前缀

2.知识剖析

2.1 常用属性之 ng-value

ng-value

ng-value 指令用于设置 input 或 select 元素的 value 属性
ng-value 的格式：<element ng-value="expression"></element>
下面看几个例子
这里有几个结论：1.ng-value会赋值给value，并且优先于ng-model
2.ng-value不是双向绑定，不会因为value的值改变
可以把ng-value就当成一个可以用给input等元素的value赋值的属性
2.2 常用属性之 ng-if

ng-if

ng-if 指令用于在表达式为 false 时移除 HTML 元素，在表达式为 true 时添加 HTML 元素
ng-if 的格式<element ng-if="expression"></element>
这里区别于ng-show和ng-hide，ng-if会直接在DOM树中添加或者删除节点，而前面两个只会显示隐藏
下面再看几个例子
2.3 常用属性之 ng-click

ng-click

ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作
ng-click 的格式<element ng-click="expression"></element>
这里可以参考js的onclick
下面再再看几个例子
2.4 常用属性之 ng-options

ng-options

ng-options 指令用于使用 options 填充 select 元素的选项
这里可以对比ng-repeat的方法
下面再再再看几个例子
2.5 常用属性之 ng-class

ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类
ng-class 指令的值可以是字符串，对象，或一个数组
下面再再再再看几个例子

3.常见问题

实例：ng-if会生成一个子作用域，在ng-if隐藏（不存在）时的作用域$scope在ng-if显示后，会搜索不到其子作用域，导致ng-model绑定不到ng-if新生成的子作用域内的值
非常见实例：uib-progressbar只能使用value并且可以使用表达式

4.解决方案

在大部分情况使用ng-show代替ng-if 或者可以使用ng-if但是同时需要将ng-model中的变量添加$parent来获取父级作用域

5.编码实战

这里看一下我在任务中的实例

6.拓展思考

1.什么情况下使用ng-if代替ng-show
2.ng-click、ng-change、ng-dblclick、ng-checked该怎么选择

7.参考文献

正确使用ng-if和ng-show
ng-model与ng-value的区别
菜鸟教程
ng-class用法

8.更多讨论

讨论时间到，欢迎大家提问！

感谢大家观看

BY : 关楠