Angularjs ES6 class directive

Question

I'm trying to use classes to define a directive. The html does show up and it does show it's calling the ctor and the controller functions. However, I have a class method that I want to call in the html from a ng-click but it's not getting called.

Note I'm working in 1.3x an can't upgrade at this time.

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

Directive:

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>

Karim · Accepted Answer · 2018-04-23 17:03:35Z

1

addNew() method is attached to the class scope, whether you need to attach it to the controller() scope (that is different)

Add the method inside the controller and you should be fine.

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

edited Apr 23, 2018 at 17:03

answered Apr 17, 2018 at 17:36

Karim

8,6823 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user441521 Over a year ago

No other way around that huh? I don't enjoy that syntax but if there is no other way then that'll work.

user441521 Over a year ago

Can I access the class methods from inside the controller so I can just set vm.addNew = ClassMethodFunction; so the function can be defined at the class level? Basically 'this' when in the ctor is different object than 'this' in controller() right? So how do I get 'this' of the ctor from inside the controller I guess?

Karim Over a year ago

i don't think it is possible, you should play with the scopes of the functions but it doesn't worth it. in my opinion is even clearer that your controller methods should be inside your controller, and doesn't mess with the directive scope.

Collectives™ on Stack Overflow

Angularjs ES6 class directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related