angularJS开发注意事项

作为一个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元素失去焦点改变后调用监听,从而显示校验的提示. , , ,这些元素支持该指令</p><div class="jb51code"><pre class="brush:js;"> <input ng-model="name" ng-model-options="{updateOn: 'blur'}"> //使用示例</pre></div><p>//可配置参数<br/></p><blockquote><p>{updateOn: 'event'}规则指定事件发生后绑定数据<br/> {debounce : 1000} 规定等待多少毫秒后绑定数据<br/> {allowInvalid : true|false} 规定是否需要验证后绑定数据<br/> {getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型<br/> {timezone : '0100'} 规则是否使用时区</p></blockquote><p>3. 告别令人尴尬的 {{}}<br/></p><p>我们都知道,当页面还未加载完毕的时候会出现{{ xxx }}这种尴尬的情况,通过使用ng-bind-template指令,就可以避免尴尬情况的出现.</p><div class="jb51code"><pre class="brush:js;"> <p ng-bind-template="{{name}}"></p> //使用示例</pre></div><p>4.解决ng-if,ng-show,ng-hide偶然出现的闪现的问题<br/></p><p>(1) 将html片段抽出,通过指令引入ng-include,ng-bind-html<br/></p><p>(2) 通过ng-cloak指令</p><p>5.控制器之间的通讯问题<br/></p><p>(1)路由传参</p><div class="jb51code"><pre class="brush:js;"> //传递 $state.go(path, {name:"dfdd"}) ui-sref="path({name:"dfdd"})" //获取 $scope.$stateParams.name</pre></div><p>(2)通过广播<br/></p><p>通过子元素传递给父元素,然后父元素再广播给其他子元素,注意这个广播是很快就完成的,所以很有可能出现子页面还未加载完父元素的广播就已经完成了,为了避免这种情况,需要父元素的广播延迟执行.<br/> (这种情况有一个弊端,当进入子页面后再次刷新页面,这次的广播已经没有了,就会导致这个子页面的数据获取失败了.)</p><p>(3)定义全局变量(window)<br/></p><p>将多个控制器都需要通讯的变量定义为全局的.这样每个控制器都可以访问到和改写.</p><p>(4) 缓存<br/></p><p>sessionStorage, localStorage, cookie,浏览器的各种数据库</p><p>以上方法个人比较推荐路由传参的方式</p><p>6.$destroy的使用是必要的<br/></p><ul><li>(1)页面离开时清除页面的定时器</li><li>(2)页面离开时清除页面的监听器</li><li>(3)页面离开时清除页面的modal,popover之类的遮罩层.</li></ul><div class="jb51code"><pre class="brush:js;"> var destroyWatcher = $scope.$watch(...); //示例代码 //$watch方法会返回一个函数,这个函数用来销毁监听器,我们用一个变量承接这个函数,然后再destory的时候调用这个函数就可以销毁不必要的监听器了. $scope.$on("$destroy", function() { if (timer) { $timeout.cancel(timer); } $scope.popover.remove(); destroyWatcher(); } </pre></div><p></p></div><p>以上就是angularJS开发注意事项的详细内容，更多请关注易知道|edz.cc其它相关文章！</p></article> <script> window.onload=function(){ var imgs = document.getElementsByTagName('img'); for(var i = 0;imgs[i];i++){ var thttp = imgs[i].getAttribute('src').indexOf("http"); var tok = imgs[i].getAttribute('src').indexOf("//"); if(thttp == -1 || tok == -1) {imgs[i].setAttribute('src', 'https://www.ezd.cc' + (imgs[i].getAttribute('src') || ''));} } } </script> <div class="entry-meta"> <div class="articleinfo-tag"><i class="iconfont icon-biaoqian"></i><a href="/tags/fenxiang.html" title="分享" class="c1" target="_blank">分享</a><a href="/tags/wuxiao.html" title="无效" class="c1" target="_blank">无效</a><a href="/tags/xuexi.html" title="学习" class="c1" target="_blank">学习</a><a href="/tags/cankao.html" title="参考" class="c1" target="_blank">参考</a><a href="/tags/kaifa.html" title="开发" class="c1" target="_blank">开发</a></div> </div> </div> <div class="relatebox"> <div class="relatebox-lists"> <h3>推荐阅读<span></span></h3> <div class="relatebox-articles"> <ul> <article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc7E.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/50.webp" alt="学习写字楼新选择6000元主流配置" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc7E.html" title="学习写字楼新选择6000元主流配置">学习写字楼新选择6000元主流配置</a></h2> </div> <p class="text-muted meta">学习写字楼新选择6000元主流配置，，这种配置需要考虑双核心的办公和娱乐平台，充分考虑办公室的办公需求和娱乐需求，以约6000元的预算和cost-e</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc3n.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/4.webp" alt="怎么把电脑显卡清灰分享|显卡清灰教程" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc3n.html" title="怎么把电脑显卡清灰分享|显卡清灰教程">怎么把电脑显卡清灰分享|显卡清灰教程</a></h2> </div> <p class="text-muted meta">怎么把电脑显卡清灰分享|显卡清灰教程，，1. 显卡清灰教程1.首先右击鼠标,点击计算机选项,然后选择属性选项。2.接下来点击高级系统设置选项</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc0p.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030507/sorb4jwi3c154.webp" alt="金蝶苍穹开发者社区端口|金蝶软件好用吗?金蝶国际软件集团有限公司始创于1993年,是香港" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc0p.html" title="金蝶苍穹开发者社区端口|金蝶软件好用吗?金蝶国际软件集团有限公司始创于1993年,是香港">金蝶苍穹开发者社区端口|金蝶软件好用吗?金</a></h2> </div> <p class="text-muted meta">金蝶苍穹开发者社区端口|金蝶软件好用吗?金蝶国际软件集团有限公司始创于1993年,是香港，，1.金蝶软件好用吗?金蝶国际软件集团有限公司始创</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LczN.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/44.webp" alt="Lucene学习之高亮显示" /></span></a></p> <div class="title"> <h2><a href="/zs/LczN.html" title="Lucene学习之高亮显示">Lucene学习之高亮显示</a></h2> </div> <p class="text-muted meta">Lucene学习之高亮显示，索引,字符，在搜索引擎中我们经常会看到这样的情景： 红色部分我们称之为高亮显示，lucene提供了HighLighter模块来实</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcyu.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030508/ur15oza5tox43.webp" alt="开发者吐槽Win10应用商店：还不如WP8.1/Win8.1版" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcyu.html" title="开发者吐槽Win10应用商店：还不如WP8.1/Win8.1版">开发者吐槽Win10应用商店：还不如WP8.1/Win8.</a></h2> </div> <p class="text-muted meta">开发者吐槽Win10应用商店：还不如WP8.1/Win8.1版，开发者,商店，Win10UWP平台是微软统一平台的重要一环，目前微软正在积极推进该应用平台的发展</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LcwX.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/54.webp" alt="这种配置还不知道。它主要用于日常学习和娱乐，偶尔玩游戏。" /></span></a></p> <div class="title"> <h2><a href="/zs/LcwX.html" title="这种配置还不知道。它主要用于日常学习和娱乐，偶尔玩游戏。">这种配置还不知道。它主要用于日常学习和娱</a></h2> </div> <p class="text-muted meta">这种配置还不知道。它主要用于日常学习和娱乐，偶尔玩游戏。，，CPU英特尔奔腾双核E6300 580 主板技嘉ga-ep43-es3g（启。1）599 金士顿2GB DDR2</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lctp.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/97.webp" alt="2010年底DIY硬件总结和安装参考" /></span></a></p> <div class="title"> <h2><a href="/zs/Lctp.html" title="2010年底DIY硬件总结和安装参考">2010年底DIY硬件总结和安装参考</a></h2> </div> <p class="text-muted meta">2010年底DIY硬件总结和安装参考，，它似乎只是一眨眼的功夫从过去的最后一眼。看看现在的岗位似乎就在昨天，但看看当年的内容是真的走了，如果</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcr.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/28.webp" alt="Windows8开发版系统高清系统接口图" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcr.html" title="Windows8开发版系统高清系统接口图">Windows8开发版系统高清系统接口图</a></h2> </div> <p class="text-muted meta">Windows8开发版系统高清系统接口图，，今天，微软发布，目前由开发者体验版Windows 8操作系统为整个英文系统，Windows 8带来了一系列新功能，没有折</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcqt.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/26.webp" alt="虾类安装经验分享！" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcqt.html" title="虾类安装经验分享！">虾类安装经验分享！</a></h2> </div> <p class="text-muted meta">虾类安装经验分享！，，虾类安装经验分享： 1，机箱的电源光盘应该接近代理价格，而内存和硬盘的价格是在互联网上找到的即时价格。主板套件，视频卡</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcnm.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/32.webp" alt="Windows电脑申请iOS证书教程及工具分享" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcnm.html" title="Windows电脑申请iOS证书教程及工具分享">Windows电脑申请iOS证书教程及工具分享</a></h2> </div> <p class="text-muted meta">Windows电脑申请iOS证书教程及工具分享，证书,文件，首先介绍下常用苹果iOS证书的常用类型iOS Development:iOS开发证书（用于真机调试测试）iOS</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lclz.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/91.webp" alt="第二代产品市场分析逐渐成为DirectX11开发卡市场的主流" /></span></a></p> <div class="title"> <h2><a href="/zs/Lclz.html" title="第二代产品市场分析逐渐成为DirectX11开发卡市场的主流">第二代产品市场分析逐渐成为DirectX11开发</a></h2> </div> <p class="text-muted meta">第二代产品市场分析逐渐成为DirectX11开发卡市场的主流，，已经有两年多以来的第一direclx 11视频卡被释放。此时，direclx 11显卡已经发展到</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbY6.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/94.webp" alt="2、学习lucene之索引删除、恢复删除、强制删除" /></span></a></p> <div class="title"> <h2><a href="/zs/LbY6.html" title="2、学习lucene之索引删除、恢复删除、强制删除">2、学习lucene之索引删除、恢复删除、强制</a></h2> </div> <p class="text-muted meta">2、学习lucene之索引删除、恢复删除、强制删除，索引,位置， 本来想在这篇里把索引的优化和更新一起写，但写完标题后发现标题好长，所以</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbUh.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/3.webp" alt="火星电脑软件开发|火星软件下载" /></span></a></p> <div class="title"> <h2><a href="/zs/LbUh.html" title="火星电脑软件开发|火星软件下载">火星电脑软件开发|火星软件下载</a></h2> </div> <p class="text-muted meta">火星电脑软件开发|火星软件下载，，火星软件下载这个你可以先用电脑来实现这个事，首先你在电脑上打开浏览器，在浏览器里搜索活星直播软件，找到</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbLJ.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/83.webp" alt="新建参考线快捷键|新建参考线快捷键Mac电脑" /></span></a></p> <div class="title"> <h2><a href="/zs/LbLJ.html" title="新建参考线快捷键|新建参考线快捷键Mac电脑">新建参考线快捷键|新建参考线快捷键Mac电脑</a></h2> </div> <p class="text-muted meta">新建参考线快捷键|新建参考线快捷键Mac电脑，，新建参考线快捷键Mac电脑ps前景色填充快捷键是Alt+Delete。1、打开ps，点击新建，创建2、点击左</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbLn.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/27.webp" alt="电脑开发者选项在哪里打开|开发者选项从哪里打开" /></span></a></p> <div class="title"> <h2><a href="/zs/LbLn.html" title="电脑开发者选项在哪里打开|开发者选项从哪里打开">电脑开发者选项在哪里打开|开发者选项从哪</a></h2> </div> <p class="text-muted meta">电脑开发者选项在哪里打开|开发者选项从哪里打开，，1. 电脑开发者选项在哪里打开打开方法：1、在应用程序列表中选择「设置」进入系统设置菜</p> </article></ul> </div> </div> </div> </div> </div> <footer class="footer"> <p>Copyright © 2023 易知道 ezd.cc All Rights Reserved</p> <p><a href="https://beian.miit.gov.cn/">京ICP备19020253号-3</a></p> </footer> </body> </html>