angular1 问题总结（持续更新）

目录

1. ng-show，ng-hide，ng-if的区别和使用情景。
2. scope双向绑定失效。
3. 在angular中使用ng-repeat时数组中有重复元素
4. 配合bootstrap在lebal标签内嵌套switch标签，重复执行

---

1.ng-show，ng-hide，ng-if的区别和使用情景。

1. angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-if的表达式值为true的时候，元素会显示，为false的时候会隐藏，ng-hide相反。
2. 但是ng-show和ng-hide控制元素的显示或隐藏是通过改变CSS的display属性值来实现的。即，视觉上看不到了，但是html节点还存在，当你在这种元素上绑定ng-modal的时候，变量依旧会存在，会触发浏览器的重绘行为（repaint）。
3. ng-if则是通过对元素节点的创建或者删除来进行显示隐藏，这种隐藏是完全删除了这个html节点，包括作用域及变量都不存在了。

总结区别就在于，if是操作html节点和作用域的删除和创建，触发回流，show，hide操作css的display样式，触发重绘，不会删除作用域和节点。

---

2.scope双向绑定失效。

• 当你的angular页面中引入了jq插件的时候，就可能会出现双向绑定失效的现象。
• 表现为你的变量打印出来是已经更改过的数值，但是页面中的数值不改变。视图层没有更新。
• 解决办法：我们可以使用$scope.apply();
• $scope.audio_volume = video.volume * 100; $scope.showVideo = true; $scope.$apply();
• 更新赋值之后，apply触发视图更新。

---

3. 在angular中使用ng-repeat时数组中有重复元素

---

• 当我们在循环的数组中存在有重复的元素时候，angular的ng-repeat就会报错，那是因为其不允许collection有相同的id（相同的元素会形成相同的id）出现。而基本的数据类型它的id就是它自身的值。

• 我们要避免这种情况通常会使用track by $index 来让其生成自己不同的id，这样是最常用的直接通过索引来生成id。我们也可以通过自己设置业务上的id，然后用其进行遍历track by item.id.

• 总结一下，解决重复问题的方法就是item in items track by $index

使用$index会出现的问题。

• 我们使用$index不仅仅是为了避免重复元素的问题，有时候会被使用$index的索引来进行一部分操作，这里有一个坑需要注意。

当我们使用$index的时候，下列情况会出现$index跟原序列不匹配的情况

1. 当我们改变列表的顺序的时候
2. 当我们在列表中插入或者删除的时候

由于$index会跟随item上移下移，或者随之被删除。（例如你把列表第二条和第一条位置互换，这时候列表现在第一条的$index依旧为2，第二条还是原来的1，这时候你再使用‘$index`传值就不在是新数组的索引了，不再匹配。

所以使用$index的时候要特别注意这些问题

---

4. 在lebal标签内绑定的事件会执行两次

---

• 当我们使用bootstrap的表单的时候，通常input前面的说明文字都用label包裹起来，特别是当我们使用check类型的input的时候，会方便我们点击选中。当我们使用switch标签嵌套在内的时候，switch会出现怪异的卡顿行为，switch绑定的事件也会执行两遍。
• 据排查之后，应该是点击事件绑定在switch上之后，众所周知，label标签的作用就是为了触发其所绑定的控件，比如上面所说check类型的input。

选中

• 以上代码我们点击文字选中 和点击input标签的效果是一样的。所以switch事件执行两次我认为是当我们点击switch的时候，触发了switch的事件，同时点击事件在label又触发switch执行了一次事件。由此执行了两次事件，同时事件绑定在label同样会触发两次，所以我们要格外注意。

选中
或者
选中

解决方法：
1. 选中
或者
2. 点击事件中阻止冒泡。

---

待续。