AngularJS踩坑记录

一直在学vue，react和koa，然后最近接受的项目居然是angular和express，刚开始压力山大，做项目的过程中才发现：用vue和react做过项目后，用angular写项目有很多相通的东西；用koa踩过node层的坑以后，用express也是大同小异。

其实最为核心的部分是：前端基本功，后端基本功。具体是什么这里就不赘述了。下面将开始记录自己这段时间，踩过的angular1.6.5的坑。

1.model层数据更新，而view层视图不更新

setTimeout(function(){
    $scope.$apply(function(){
        $scope.foo = "foo";
        $scope.bar = JSON.parse(JSON.stringify({"key":"value"}))//deepCopy
        $scope.baz = Object.assign({},{"key",value})//shallowCopy
    })
},500)

2.标签过滤功能如何实现
数据已经缓存到本地，数据搜索仅仅是对前端数据层的过滤，不涉及与后端的异步通信。

ng-repeat="item in list | filter:{name:currentUser}"

3.angular通过什么分发内容
directive机制。

    .directive('dirList',[function(){
        return {
            retrict: 'E',
            replace: 'true',
            templateUrl: 'views/appDirList.html'
        }
    }])

其中的retrict:'E'可以使得驼峰式的dirList转换为横线式的<dir-list></dir-list>，这个算法在vue源码中也有相应实现。

4.如何查看当前$scope
angular.element($0).scope()
更加高效的方式，使用chrome扩展：
ng-inspector for AngularJS
ng-inspector for Angular

5.ng-if，ng-hide/ng-show有什么异同？

ng-if会从DOM树上移除元素。这意味着你的所有事件处理函数以及其他任何附加在被移除元素上的东西都会丢失。例如，如果你绑定了一个事件处理函数到它的一个子元素，当ng-if是false，这个元素将会从DOM移除，而且你的单击事件处理器也会失效，即使后面ng-if又再次计算成true并且将元素展示了出来，但是你的事件处理函数不会还原，需要重新为元素添加事件。
ng-show/ng-hide不会从DOM移除元素。它使用CSS的样式去控制元素的显示。（提示：你可能需要添加自己的class）。这种方式你添加在子元素上的事件处理函数不会丢失。
ng-if会创建一个子作用域，而ng-show和ng-hide不会。

扫描二维码关注公众号，回复： 5225755 查看本文章

不再DOM中的元素性能影响比较小，而且你的web应用在使用ng-if后会比ng-show/ng-hide更快。按照我的经验来说，这种区别是完全可以忽略的。动画会既使用ng-show/ng-hide又使用ng-if，这些在angular的文档中有。

参考：https://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide#

6.ng-show不生效

ng-show="{{middlewareShow}}"

这样写会导致仅仅更新ng-show的值，但是背后的事件处理函数不会触发。

ng-show="middlewareShow"

只有去掉花括号，才能正常触发事件处理函数，达到我们的目的。

7.angular中每一个controller都有独立的$scope
当前controller若想获取其他controller的数据，可以通过如此方式

sessionStorage 推荐
ui-router($stateParams) 推挤
rootScope
service
eventbus

猜你喜欢