javascript - Angularjs ES6 类指令

Question

我正在尝试使用类来定义指令。 html 确实出现了，它确实显示它正在调用 ctor 和 Controller 函数。但是，我有一个类方法，我想通过 ng-click 在 html 中调用它，但它没有被调用。

请注意，我正在使用 1.3x，目前无法升级。

https://plnkr.co/edit/cWyyCahfoWWwk0UN49ep?p=preview

指令:

class StoreHours{

  constructor(){
    console.log("inside ctor");
    this.restrict = 'E';
    this.templateUrl = 'storeHours.html';
    this.bindToController = true;
    this.controllerAs = 'vm';
    this.scope = {
      hours: '=',
      index: '=',
      addNewHour: '&'
    };
  }

  controller(){
    console.log("inside controller");
  }

  // the member metod that I want ng-click to call
  addNew(newHour){
    var vm = this;

    console.log("addNew()");

    vm.addNewHour({ hour: newHour, index: vm.index });

    vm.newHour = "";
  }

  // don't need this but just showing
  link(scope, element, attrs){

  }
}

app.directive('storeHours', () => new StoreHours);

HTML:

<div style="background-color: gray;">
  <h1>I'm the store hours component!</h1>

  <li ng-repeat="hrs in vm.hours">
    {{hrs}}
  </li>

  <input type="text" ng-model="vm.newHour" />
  <button ng-click="vm.addNew(vm.newHour)">Add New</button>
</div>

Answer 1

addNew()方法附加到类作用域，是否需要附加到controller()作用域(即不同)

在 Controller 中添加方法，你应该没问题。

  controller(){
    console.log("inside controller");
    var vm = this;  
    vm.addNew = function(newHour){
      console.log("addNew()");
      vm.addNewHour({ hour: newHour, index: vm.index });
      vm.newHour = "";
    }
  }