摘要:作为一个应该具有经常总结反思的习惯如果不能及时总结可能就会忘记自己踩过的很多坑然后会导致同一个坑踩很多次所以我打算把这些都记录下来以方便是对自己的重复记忆避免无效的另一方面可以希望可以给遇到相似问题的同僚们一些收获手动触发脏检查在开发过程中
作为一个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元素失去焦点改变后调用监听,从而显示校验的提示. ,
//使用示例
//可配置参数
{updateOn: "event"}规则指定事件发生后绑定数据
{debounce : 1000} 规定等待多少毫秒后绑定数据
{allowInvalid : true|false} 规定是否需要验证后绑定数据
{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型
{timezone : "0100"} 规则是否使用时区
我们都知道,当页面还未加载完毕的时候会出现{{ xxx }}这种尴尬的情况,通过使用ng-bind-template指令,就可以避免尴尬情况的出现.
//使用示例4.解决ng-if,ng-show,ng-hide偶然出现的闪现的问题
(1) 将html片段抽出,通过指令引入ng-include,ng-bind-html
(2) 通过ng-cloak指令
(1)路由传参
//传递 $state.go(path, {name:"dfdd"}) ui-sref="path({name:"dfdd"})" //获取 $scope.$stateParams.name
(2)通过广播
通过子元素传递给父元素,然后父元素再广播给其他子元素,注意这个广播是很快就完成的,所以很有可能出现子页面还未加载完父元素的广播就已经完成了,为了避免这种情况,需要父元素的广播延迟执行.
(这种情况有一个弊端,当进入子页面后再次刷新页面,这次的广播已经没有了,就会导致这个子页面的数据获取失败了.)
(3)定义全局变量(window)
将多个控制器都需要通讯的变量定义为全局的.这样每个控制器都可以访问到和改写.
(4) 缓存
sessionStorage, localStorage, cookie,浏览器的各种数据库
以上方法个人比较推荐路由传参的方式
6.$destroy的使用是必要的(1)页面离开时清除页面的定时器
(2)页面离开时清除页面的监听器
(3)页面离开时清除页面的modal,popover之类的遮罩层.
var destroyWatcher = $scope.$watch(...); //示例代码 //$watch方法会返回一个函数,这个函数用来销毁监听器,我们用一个变量承接这个函数,然后再destory的时候调用这个函数就可以销毁不必要的监听器了. $scope.$on("$destroy", function() { if (timer) { $timeout.cancel(timer); } $scope.popover.remove(); destroyWatcher(); }
就先写到这儿了,后面会持续更新...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92033.html
摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...
摘要:下面围绕的这样的目的,即左右知乎网页上屏幕截图功能的实现前端掘金背景最近注意到知乎的屏幕截图反馈功能,感觉非常不错。正如你期望的,文中的闯关记之垃圾回收和内存管理前端掘金题图来源,授权基于协议。 微信小程序实战学习 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序?大场景? 微信小程序本质上来说就是一个 HTML 5(移动网页) 应用,用view、scoll-view代替了div标...
摘要:前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来,后续持续跟新中开发工具下载地址在线工具解析工具在线图片压缩在线编辑手册在线进制转 前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良...
阅读 2630·2019-08-30 15:53
阅读 2870·2019-08-29 16:20
阅读 1080·2019-08-29 15:10
阅读 1017·2019-08-26 10:58
阅读 2187·2019-08-26 10:49
阅读 629·2019-08-26 10:21
阅读 699·2019-08-23 18:30
阅读 1634·2019-08-23 15:58