angular js常用指令

大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网js任务8，深度思考中的知识点——angular js常用指令

1.背景介绍

指令是angular的一个特色，是对HTML的拓展，angular中指令有很多，你甚至可以自定义指令， 可以说是一个非常强大的功能。今天，先从几个最常用的指令着手，学习angular的指令。

2.知识剖析

ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？     

 （1）、ng-if：ng-if 指令其实就是控制DOM的存在与不存在。当为true的时候，添加HTML元素，false的时候删除HTML元素，其与ng-hide、ng-show等的区别是ng-if:false;会将DOM删除

（2）、ng-class：ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串，对象，或一个数组。如果是字符串，多个类名使用空格分隔。如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

（3）、ng-option：ng-options 指令用于使用填充元素的选项。

ng-options属性可以在表达式中 使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。

（4）、ng-value：

ng-value 指令用于设置 input 或 select 元素的 value 属性。

和value相比，它的值可以是表达式，所以相比之下可以实现更多需求。比如当需要使用ng-repeat来动态生成input[]的时候，ngValue是很有用处的。

（5）、ng-click：

ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。如果是使用ng-click来实现函数的执行的话，还可以进行传参。一个ng-click可以触发多个操作，先执行function1后执行function2

3.常见问题

ng-click等angular事件和click等原生事件的区别是什么？

4.解决方案

1、原生事件和angular事件的区别

这里ng-click和onclick的最主要的区别是： ng-click的作用域是其所在的ng-controller所声明的作用域，而onclick的作用域是全局的。

通过一行代码即可解决问题，直接见demo

5.编码实战

6.扩展思考

ng-if的作用域问题

ng-if指令会创建一个子级作用域，因此，如果在ng-if指令中添加了元素， 并向元素属性增加 ng-model指令，那么ng-model指令对应的作用域属性 子级作用域，而并非控制器注入的$scope作用域对象，这点在进行双向数 据绑定时，需要引起注意。

因此，解决ng-if中ng-model值无效的问题，主要方法就是在绑定值时添加$parent标识， 或者用ng-show指令代替ng-if指令，这两种方法都可以达到同样的页面效果。

写法如下：

ng-model="$parent.industry"

7.参考文献

参考一：菜鸟教程

参考二：[Angularjs]ng-select和ng-options

8.更多讨论

1.用angularJS的ng-model绑定到select上，会自动增加一个value为空的option,这是为什么？

原因：ng-model没有初始化导致的， 如果ng-model所绑定的变量的值在ng-options绑定的value里面有， 下拉选框中就不会有空白的一项，选中别的数据项以后消失； 如果ng-model所绑定的变量的值不在ng-options绑定的value里面， 下拉选框中就不会有空白一项,并且只有当ng-options绑定的value里有对应 的text为空行时，这个空行才会一直存在于下拉选项里。

解决：将select中的一个option设置为空，就可以防止因添加ng-model自动添加空option的问题

2.在实际应用的时候，ng-if和ng-show可以相互替换使用吗？

回答：这个要根据具体情况分析，一般情况下是没问题的，但是当需要对不可见的元素进行其他操作时，就最好是放弃ng-if了

3.ng-if中的ng-model值无效

解决ng-if中ng-model值无效的问题，主要方法就是在绑定值时添加$parent标识，或者用ng-show指令代替ng-if指令，这两种方法都可以达到同样的页面效果。

PPT

undefined_腾讯视频