Angular 1.5集成Angular block UI 0.2.2报错：Cannot read property 'blockUI' of null

嘿，这个问题我之前帮同事排查过，核心原因大概率是上下文丢失或者依赖注入没做好，咱们一步步来搞定：

1. 最常见的原因：$timeout回调里的this指向不对 #

你写的代码里，$timeout的回调用了普通函数，这时候函数内部的this已经不再指向你的控制器/组件实例了，自然拿不到blockUI，就会报null的错。

修复方法（三种任选其一）： #

方法一：用ES6箭头函数（推荐，Angular 1.5支持）

箭头函数会继承外部的this上下文，完美解决指向问题：

click() {
  this.blockUI.start("My custom message");
  // 这里用箭头函数代替普通function
  this.$timeout(() => {
    this.blockUI.stop();
  }, 2000);
}

方法二：提前保存this为变量

把外部的this存成self或者vm（视图模型），在回调里用这个变量：

click() {
  const self = this; // 保存当前上下文
  self.blockUI.start("My custom message");
  this.$timeout(function() {
    self.blockUI.stop(); // 用self代替this
  }, 2000);
}

方法三：用$timeout的第三个参数绑定上下文

Angular的$timeout支持第四个参数来绑定回调的this：

click() {
  this.blockUI.start("My custom message");
  this.$timeout(function() {
    this.blockUI.stop();
  }, 2000, true, this); // 最后一个参数绑定当前this
}

2. 检查依赖注入是否正确 #

如果上面的方法还没解决，那要确认你有没有把blockUI和$timeout正确注入到控制器/组件里：

传统控制器写法： #

angular.module('yourApp').controller('YourCtrl', ['blockUI', '$timeout', function(blockUI, $timeout) {
  // 把注入的服务挂载到this上，这样模板里或者方法里才能访问到
  this.blockUI = blockUI;
  this.$timeout = $timeout;

  this.click = function() {
    // 这里写修复后的代码
  };
}]);

Angular 1.5组件写法： #

angular.module('yourApp').component('yourComponent', {
  template: '<button ng-click="$ctrl.click()">点击测试</button>',
  controller: ['blockUI', '$timeout', function(blockUI, $timeout) {
    this.blockUI = blockUI;
    this.$timeout = $timeout;

    this.click = () => {
      this.blockUI.start("My custom message");
      this.$timeout(() => {
        this.blockUI.stop();
      }, 2000);
    };
  }]
});

3. 最后确认模块引入 #

确保你的应用模块已经依赖了blockUI：

angular.module('yourApp', ['blockUI']); // 这里要包含blockUI模块

这样应该就能解决报错啦，亲测有效~

内容的提问来源于stack exchange，提问作者A_S