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://mswzjz.cn/article/cdsjjc.html">http://mswzjz.cn/article/cdsjjc.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/deepiip.html">c语言用数学函数格式 c语言中数学函数怎么用</a> </li><li> <a href="/article/deepico.html">linux命令行c# linux命令行查看文件夹大小</a> </li><li> <a href="/article/deepigs.html">路由器的ip如何设置无线路由器设置路由器上网设置ip</a> </li><li> <a href="/article/deepisg.html">linux删除组群命令 linux删除组群账号</a> </li><li> <a href="/article/deepisd.html">手机连接路由器身份验证出现问题手机登陆路由器身份出现问题</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设，集团网站建设(网站建设网站制作)找网站建设公司就上四川攀枝花网站建设。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求

联系我们

028-86922220

手机：13518219792
地址：成都市太升南路288号锦天国际A幢1002号
24小时服务热线：400-028-6601

网站建设服务

网页设计
网站制作
网站开发

网站推广服务

营销网站建设
百度快速排名
整站网站推广

网站运维服务

基础维护
网站改版
网站维护

微信二维码

微信二维码

友情链接：不锈钢防护栏重庆电商网站建设四川瑞杰成都微信二次开发公司彭州网站建设 led背发光字成都网站改版绵阳网站建设公司四川成都网站设计重庆网站建设

网站建设知识

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

联系我们

网站建设服务

网站推广服务

网站运维服务

FOLLOW US