Angular中使用$apply的注意事项

9月 21, 2015 已分类前端记录

一般在AngularJS中我们是靠各种框架自己封装的事件中来触发digest loop来达到双向绑定属性脏检查的。有的时候我们对$scope操作的时候，是在AngularJS作用域外进行的，这时候我们会发现双向绑定失效了，因为我们没有触发属性脏检查，这种时候，我们就要用$apply来主动触发digest loop。
但是，有时候我们的$apply是处于一个外部的回调中触发的，如果一不小心回调频繁调用了多次，那么就会报错。因为$apply时AngularJS发现程序已经在一个$digest loop过程中了。
继续阅读

统计 AngularJS 中的 Watchers

8月 11, 2015 已分类前端记录

最近在开发Hybrid APP (我用的是Ionic Frameworks) 的过程中，随着首页栏目的逐渐增加，APP在手机上的执行效率越来越低，有时在切换频道的时候会有明显的卡顿和执行延迟。

在检查完代码逻辑和算法后，并没有发现什么问题（网络通讯，本地缓存）。最近在翻阅代码的过程中，突然意识到可能是由于频道增加，页面中双向绑定使用数量变多，导致 AngularJS 在作 digest loop 的时候，由于 $$watchers 数量过多导致程序变慢。

继续阅读

AngularJS 修饰器技巧

8月 11, 2015 已分类前端记录

可以在 directive 的 link 方法中直接使用 translude 方法来进行内包含元素的挪动，在挪动的时候可以指定内包含元素的scope。

app.directive('person', function() {
  return {
    restrict: 'EA',
    scope: {
      header: '='
    },
    transclude:true,
    link: function(scope, element, attrs, ctrl, transclude) {
      scope.person = {
        name: 'Directive Joe',
        profession: 'Scope guy'
      };

      scope.header = 'Directive\'s header';
      transclude(scope, function(clone, scope) {
        element.append(clone);
      });
    }
  };
});