Exploring the use of ES6 with Angular 1.6, leveraging Browserify and Babelify in Gulp has led me to an issue where I am unable to call a controller's methods on the DOM using ng-click when creating the controller with ES6 class.
controller:
export default class FocusbtnsController {
constructor($scope) {}
testMethod() {
alert('test method works!!');
}
}
main module:
import angular from 'angular';
import FocusbtnsController from './focusbtns.controller';
export default angular.module('shapesite', [])
.controller('FocusbtnsController', FocusbtnsController);
HTML:
<div class="center-btns ng-scope" ng-controller="FocusbtnsController">
<div class="focus-btn-container" style="left:50%;top:5%" ng-click="testMethod()">
<div class="diamond">
<div class="diamond-btn"></div>
</div>
</div>
</div>
Removing the export default from the angular.module did not yield any results. Adding the method testMethod to the $scope argument like $scope.testMethod = testMethod; does work, but it seems inefficient.
Is there something I am overlooking that would allow me to call the controller method while utilizing ES6 syntax without having to assign it to the $scope?