angularJS开发注意事项有哪些

这篇文章主要为大家展示了“angularJS开发注意事项有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“angularJS开发注意事项有哪些”这篇文章吧。

创新互联建站成都网站建设定制设计，是成都网站营销推广公司,为混凝土搅拌罐提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站制作热线：028-86922220

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><pre><input ng-model="name" ng-model-options="{updateOn: 'blur'}"> //使用示例</pre><p>//可配置参数</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. 告别令人尴尬的 {{}}</p><p>我们都知道,当页面还未加载完毕的时候会出现{{ xxx }}这种尴尬的情况,通过使用ng-bind-template指令,就可以避免尴尬情况的出现.</p><pre><p ng-bind-template="{{name}}"></p> //使用示例</pre><p>4.解决ng-if,ng-show,ng-hide偶然出现的闪现的问题</p><p>(1) 将html片段抽出,通过指令引入ng-include,ng-bind-html</p><p>(2) 通过ng-cloak指令</p><p>5.控制器之间的通讯问题</p><p>(1)路由传参</p><pre>//传递 $state.go(path, {name:"dfdd"}) ui-sref="path({name:"dfdd"})" //获取 $scope.$stateParams.name</pre><p>(2)通过广播</p><p>通过子元素传递给父元素,然后父元素再广播给其他子元素,注意这个广播是很快就完成的,所以很有可能出现子页面还未加载完父元素的广播就已经完成了,为了避免这种情况,需要父元素的广播延迟执行.<br/>(这种情况有一个弊端,当进入子页面后再次刷新页面,这次的广播已经没有了,就会导致这个子页面的数据获取失败了.)</p><p>(3)定义全局变量(window)</p><p>将多个控制器都需要通讯的变量定义为全局的.这样每个控制器都可以访问到和改写.</p><p>(4) 缓存</p><p>sessionStorage, localStorage, cookie,浏览器的各种数据库</p><p>以上方法个人比较推荐路由传参的方式</p><p>6.$destroy的使用是必要的</p><ul><li><p>(1)页面离开时清除页面的定时器</p></li><li><p>(2)页面离开时清除页面的监听器</p></li><li><p>(3)页面离开时清除页面的modal,popover之类的遮罩层.</p></li></ul><pre>var destroyWatcher = $scope.$watch(...); //示例代码 //$watch方法会返回一个函数,这个函数用来销毁监听器,我们用一个变量承接这个函数,然后再destory的时候调用这个函数就可以销毁不必要的监听器了. $scope.$on("$destroy", function() { if (timer) { $timeout.cancel(timer); } $scope.popover.remove(); destroyWatcher(); }</pre><p>以上是“angularJS开发注意事项有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！</p> <br> 本文标题：angularJS开发注意事项有哪些 <br> 网页链接：<a href="http://cdxtjz.cn/article/jhched.html">http://cdxtjz.cn/article/jhched.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dchiode.html">阿里云服务器挂载磁盘阿里云服务器挂载自己的云盘</a> </li><li> <a href="/article/dchiooo.html">阿里云2g1核的服务器多少钱阿里云服务器2核4g什么意思</a> </li><li> <a href="/article/dchioso.html">c语言函数退出的代码 c语言函数退出的代码是什么</a> </li><li> <a href="/article/dchiocc.html">php连不到数据库 php数据库连接失败</a> </li><li> <a href="/article/dchehgo.html">阿里云app可以重启服务器吗阿里云app可以重启服务器吗手机</a> </li> </ul> </div> </div> <footer> <div class="foot container"> <div class="footl fl"> <h3>联系我们</h3> <dl> 您好HELLO!<br> 感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们，我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。 </dl> <ul> <li>电话：028- <span>86922220 18980695689</span></li> <li>商务合作邮箱：631063699@qq.com</li> <li>合作QQ： 532337155</li> <li>成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼</li> </ul> </div> <div class="footr fr"> <h3>小谭建站工作室</h3> <dl> 成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！ </dl> <h3>小谭观点</h3> <dl> 相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。<br> 我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。 </dl> </div> </div> <div class="link"> <div class="container"> <span> 友情链接：</span> <a href="http://chengdu.cdcxhl.com/" title="成都网站建设" target="_blank">成都网站建设</a> <a href="http://www.cxhljz.cn/" title="成都网站设计公司" target="_blank">成都网站设计公司</a> <a href="http://www.cqcxhl.com/" title="重庆网站建设公司" target="_blank">重庆网站建设公司</a> <a href="http://www.ctjcradar.com/" title="成都铁科精智测控" target="_blank">成都铁科精智测控</a> <a href="http://www.ptjierui.cn/" title="郫县网站建设" target="_blank">郫县网站建设</a> <a href="https://www.cdcxhl.com/tuoguan.html" title="四川主机托管" target="_blank">四川主机托管</a> <a href="http://www.kswsj.cn/tuiguang/" title="网站优化排名" target="_blank">网站优化排名</a> <a href="http://www.idckuai.cn/" title="云主机" target="_blank">云主机</a> <a href="https://www.cdxwcx.com/jifang/deyang.html" title="德阳机房" target="_blank">德阳机房</a> <a href="https://www.cdcxhl.com/yunying.html" title="成都网站托管" target="_blank">成都网站托管</a> </div> </div> <div class="copy"> © Copyright 2023 <a href="http://www.cdxtjz.cn/">小谭建站工作室</a>All Rights Reserved. <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">蜀ICP备2021004003号-2</a> <a href="https://www.cdxwcx.com" target="_blank">成都网站建设</a> / <a href="https://www.cdxwcx.com" target="_blank">成都网站建设</a> / <a href="https://www.cdxwcx.com" target="_blank">响应式网站建设</a> / <a href="https://www.cdxwcx.com target=" _blank"="">定制网站建设</a> <a href="sitemap.xml" target="_blank">xml</a> <a href="sitemap.html" target="_blank">网站地图</a> </div> </footer> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>