angularJS开发注意事项有哪些-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

angularJS开发注意事项有哪些-创新互联

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

创新互联公司2013年成立，是专业互联网技术服务公司，拥有项目网站设计制作、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元梅里斯做网站,已为上家服务,为梅里斯各地企业和个人服务,联系电话:13518219792

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 class=" list-paddingleft-2"><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://lswzjz.com/article/cdsjjc.html">http://lswzjz.com/article/cdsjjc.html</a> </div> <div class="hot_new"> <div class="page_title clearfix"> <h3>其他资讯</h3> </div> <div class="news_list clearfix"> <ul> <li> <a href="/article/jgggic.html">Java5、6、7中的新特性有哪些</a> </li><li> <a href="/article/jgggih.html">虚拟主机的快慢与哪些因素有关系</a> </li><li> <a href="/article/jggged.html">Spring中怎么创建IOC容器</a> </li><li> <a href="/article/jggges.html">Python移植到arm的教程</a> </li><li> <a href="/article/jggipe.html">Vue.js中class与样式绑定的示例分析</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>  <div class="footer wow fadeInUp"> <div class="rowFluid"> <div class="span12"> <div class="container"> <div class="footer_content"> <div class="span4 col-xm-12"> <div class="footer_list"> <div class="span6"> <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div> </div> <div class="span6 col-xm-12"> <div class="quick_navigation"> <div class="quick_navigation_title">快速导航</div> <ul> <li><a href="https://www.cdcxhl.com/sosuo.html" title="关键词优化排名" target="_blank">关键词优化排名</a></li><li><a href="http://www.xhgfhy.com/ " title="犀浦封阳台" target="_blank">犀浦封阳台</a></li><li><a href="http://www.cdymzj.com/" title="域名注册" target="_blank">域名注册</a></li><li><a href="http://www.ty2auto.com/" title="成都添翼二手车" target="_blank">成都添翼二手车</a></li><li><a href="http://www.digifinexcn.com/" title="固迪佳新材料" target="_blank">固迪佳新材料</a></li><li><a href="http://www.shruijie.cn/" title="上海除甲醛" target="_blank">上海除甲醛</a></li><li><a href="http://www.kswsj.com/" title="成都网页设计" target="_blank">成都网页设计</a></li> </ul> </div> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_link"> <div class="footer_link_title">友情链接</div> <ul id="frientLinks"> <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a> <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a> <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a> <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a> </ul> <div class="footer_link_title">网站建设</div> <ul id="frientLinks"> <li><a href="/">乐山大橙子建站</a></li> <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li> </ul> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_cotact"> <div class="footer_cotact_title">联系方式</div> <ul> <li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">青羊区大橙子信息咨询工作室</span></li> <li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li> <li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li> <li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="乐山网站建设">www.lswzjz.com</a></span></li> </ul> </div> </div> </div> </div> </div> <div class="copyright"> <p>公司名称：青羊区大橙子信息咨询工作室联系电话：18980820575</p> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号：蜀ICP备2022028542号-13</a></p> <p>乐山大橙子建站乐山网站建设乐山网站设计乐山网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p> </div> </div> </div> </div> </body> </html> <script> $(".technical_support_box_z_info_box 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>