资讯专栏INFORMATION COLUMN

angularJS开发的注意事项汇总

Null / 3146人阅读

摘要:作为一个应该具有经常总结反思的习惯如果不能及时总结可能就会忘记自己踩过的很多坑然后会导致同一个坑踩很多次所以我打算把这些都记录下来以方便是对自己的重复记忆避免无效的另一方面可以希望可以给遇到相似问题的同僚们一些收获手动触发脏检查在开发过程中

作为一个coder,应该具有经常总结反思的习惯,如果不能及时总结,可能就会忘记自己踩过的很多坑,然后会导致同一个坑踩很多次,所以我打算把这些都记录下来,以方便是对自己的重复记忆,避免无效的coding,另一方面可以希望可以给遇到相似问题的同僚们一些收获.

1.手动触发脏检查

在开发过程中,我们可能经常会通过js来手动更改绑定的相关数据,而不是通过dom操作来改变绑定的相关数据,这样也很多情况下会导致绑定数据的视图不能够及时更新,这个时候就需要我们手动触发一下脏检查,下面我就介绍一下三种手动触发脏检查的方法.

(1) $apply() 方法
在需要手动触发的地方调用 $scope.$apply(),使用该方法会触发angular从rootScope的作用域下开始进行绑定变量值的轮询,相比较$digest()方法比较费时.
但是这个有时这个方法会报错.
(2) $digest() 方法
在需要手动触发的地方调用 $scope.$digest(),使用该方法会触发angular从scope的作用域下开始进行绑定变量值的轮询,相比较$aplly()更合理.
(3) $timeout()方法
将操作绑定数据的逻辑写在$timeout()方法中.

找到一种更完美的解决动态添加数据导致页面不能及时渲染的方法,迫不及待地来分享给大家~~~

可以定义一个全局的方法.这个方法就是经过处理过的apply函数,大家都叫它safeApply.上代码了:

$rootScope.safeApply = function(fn) {
    var phase = this.$root.$$phase;
    if(phase == "$apply" || phase == "$digest") {
        if(fn && (typeof(fn) === "function")) {
            fn();
        } else {
            this.$apply(fn);
        }
    }
}

然后在需要动态添加吧的地方调用$rootScope.safeApply()即可,或者把需要动态添加的代码作为写进$rootScope.safeApply方法的fn参数里.

2.ng-model-options 指令

这个指令在表单校验的时候非常有用,我们可以设置什么时候出发试图更新,这样你就可以设置dom元素失去焦点改变后调用监听,从而显示校验的提示. ,