AngularJS 1.3中ES6类定义指令，ng-click无法调用类方法问题

你遇到的这个问题，核心原因是AngularJS 1.3对ES6类的支持不完善——它发布于2014年，早于ES6类的普及，指令系统没有针对类的方法绑定做适配。虽然构造函数和控制器能正常执行，但类里的方法并没有被正确绑定到Angular的作用域/控制器实例上，导致ng-click找不到对应的方法。

下面给你几个可行的解决方案：

方案一：在构造函数中手动绑定方法到实例 #

在类的构造函数里，用bind把需要被调用的方法绑定到当前实例，确保this指向正确：

class StoreHours {
  constructor() {
    console.log("inside ctor");
    this.restrict = 'E';
    this.templateUrl = 'storeHours.html';
    this.bindToController = {
      location: '='
    };
    this.controller = this;
    this.controllerAs = 'vm';
    
    // 关键：手动绑定方法到类实例
    this.addHour = this.addHour.bind(this);
  }

  addHour() {
    console.log("addHour called");
    // 这里的this现在指向StoreHours实例，可以正常访问类属性
  }
}

方案二：用箭头函数定义类方法（需转译支持） #

箭头函数会自动绑定当前上下文的this，如果你的项目用了Babel等转译工具，可以直接把方法定义成箭头函数：

class StoreHours {
  constructor() {
    console.log("inside ctor");
    this.restrict = 'E';
    this.templateUrl = 'storeHours.html';
    this.bindToController = {
      location: '='
    };
    this.controller = this;
    this.controllerAs = 'vm';
  }

  // 箭头函数自动绑定this到类实例
  addHour = () => {
    console.log("addHour called");
    // 逻辑代码
  }
}

方案三：显式挂载方法到$scope（兼容最老环境） #

如果不想依赖类的绑定特性，也可以回到AngularJS传统的方式，在控制器里把方法挂载到$scope上：

class StoreHours {
  constructor() {
    console.log("inside ctor");
    this.restrict = 'E';
    this.templateUrl = 'storeHours.html';
    this.bindToController = {
      location: '='
    };
    // 改用函数式控制器，手动挂载方法到$scope
    this.controller = function($scope) {
      console.log("inside controller");
      $scope.addHour = () => {
        console.log("addHour called");
        // 逻辑代码
      };
    };
  }
}

最后还要确认你的指令注册方式正确，需要返回类的实例：

angular.module('yourApp').directive('storeHours', () => new StoreHours());

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