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元素失去焦点改变后调用监听,从而显示校验的提示. <input>, <select>, <textarea>,这些元素支持该指令





<input ng-model="name" ng-model-options="{updateOn: 'blur'}"> //使用示例



//可配置参数





{updateOn: 'event'}规则指定事件发生后绑定数据

{debounce : 1000} 规定等待多少毫秒后绑定数据

{allowInvalid : true|false} 规定是否需要验证后绑定数据

{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型

{timezone : '0100'} 规则是否使用时区



3. 告别令人尴尬的 {{}}



我们都知道,当页面还未加载完毕的时候会出现{{ xxx }}这种尴尬的情况,通过使用ng-bind-template指令,就可以避免尴尬情况的出现.





<p ng-bind-template="{{name}}"></p>   //使用示例



4.解决ng-if,ng-show,ng-hide偶然出现的闪现的问题



(1) 将html片段抽出,通过指令引入ng-include,ng-bind-html



(2) 通过ng-cloak指令

5.控制器之间的通讯问题



(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();

}