After using classes to define a directive, I encountered an issue. The html code is displaying correctly and the constructor and controller functions are being called as expected. However, there is a specific class method that I intended to call from the HTML using ng-click but it seems like it's not working.
It's worth mentioning that I am currently working on version 1.3x and cannot upgrade at the moment.
Directive:
class StoreHours{
constructor(){
console.log("Inside constructor");
this.restrict = 'E';
this.templateUrl = 'storeHours.html';
this.bindToController = true;
this.controllerAs = 'vm';
this.scope = {
hours: '=',
index: '=',
addNewHour: '&'
};
}
controller(){
console.log("Inside controller function");
}
// The class method I want to call with ng-click
addNew(newHour){
var vm = this;
console.log("addNew()");
vm.addNewHour({ hour: newHour, index: vm.index });
vm.newHour = "";
}
// Not necessary but included for reference
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>