项目中Angularjs遇到的问题和优化总结

（1）ng-if 与ng-show ng-hide区别

• ng-show/ng-hide是通过修改CSS样式方式控制元素显示与隐藏，对应的DOM元素会一直存在于当前页面中，本质是CSS属性操作display:none；display:block，而ng-if根据表达式的值动态的在当前的页面中添加删除页面元素。如果赋值表达式的值为false，那么这个元素就会从页面中删除，否则会添加一个元素。ng-if创建元素时用的是被它编译后的代码，如果ng-if内部的代码被其它方式修改过，那么修改只会对本次展现有效，页面元素重新渲染后修改效果会消失，而ng-show/ng-hide则能够保留dom元素上次修改后的状态。
• 在作用域方面，两者也存在差异：当一个元素被ng-if从DOM中删除时，与其关联的作用域也会被销毁。而且当它重新加入DOM中时，则会生成一个新的作用域，而ng-show和ng-hide则不会。
• 项目中由于需要多个列表数据较多，如果频繁的重建和删除DOM元素，将十分耗性能，所以在性能考虑上使用ng-show。
• 当然也有另一种情况，那就是一些长列表数据,可能有一些东西是通过默认隐藏,点击显示的形式展现的.而这部分可控制显隐的内容中也会伴随很多数据绑定.这个在页面渲染的时候非常影响性能.（angular建议一个页面的数据绑定不超过2000个,假如现在有一个页面直接绑定了2000个model,然后你加载,会发现非常卡.如果你将每100的model设置为ng-show,默认情况下不显示,你会发现还是很卡.）然后你将所有的ng-show换成ng-if,你会发现性能瞬间快的像两个应用.原因在ng-show还是会执行其中的所有绑定,ng-if则会在等于true,也就是显示的时候再去执行其中的绑定.这样一来性能就有很大的提高.
• 示例

（2）双向数据绑定{{}}使用刷新出现{{}}

• 由于后台数据问题没有访问成功，前台界面就不需要显示{{}}，用ng-bind指令代替{{}}

（3）$rootScrope以及和$scope的区别？

• $rootScrope 页面所有$scope的父亲。
• 如何产生$rootScope和$scope
  step1:Angular解析ng-app然后在内存中创建$rootScope。
  step2:angular回继续解析，找到{{}}表达式或者ng-bind指令，并解析成变量。
  step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

（4）ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

• 会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然，也可以 trace by 任何一个普通的值，只要能唯一性标识数组中的每一项即可（建立 dom 和数据之间的关联）。

(5)更新 ng-repeat

• 当使用ng-repeat时要尽量避免对全局列表的刷新。ng-repeat会产生一个$$hashkey属性和一系统唯一的项。这意味着当你调用 scope.listBoundToNgRepeat = serverFetch() 时会引起对整个列表的重新刷新。会通知执行所有的watchers并触发每一个元素，这是非常消耗性能的。
• 这里有两种解决方案。一种是维护两个集合，和带有过虑器(filter)的ng-repeat(基本上需要自定义同步逻辑，因此算法更复杂，可维护性更差)，另一种方案是使用track by去指定你自己的key(Angular 1.2 开始支持，只需要很少的同步逻辑)。
• <div ng-repeat="a in arr">
• 改为
• <div ng-repeat="a in arr track by a.trackingKey">

（6）使用双向数据绑定搭建多级联动操作

示例

(7)关于ui-router内存泄露

参考