[AngularJS] Angular 1.x Directive Classes and Webpack

[scott]

I am having an issue with a directive in my code and am hoping someone can 
point me in the right direction.  The directive works OK when viewed in a 
Web browser like Chrome or Firefox.  When I try to view the same app within 
Cordova's In-App Browser, the directive throws an error.   

I have tracked the issue down to the format of the file itself.  The error 
I get is "Uncaught SyntaxError: <unknown message reserved_word".  Webpack 
does not like the reserved word "class" within the directive.   In reading 
up on the issue, it points to possibly converting the class to ES6 format?  
 

So I guess my question how to update the following directive so that it 
works properly with Webpack?

class optionsDirective {
    constructor ($compile) {
        return {
            restrict: 'E',           
            scope: {
                option: '=ngModel'
            },
            link: function (scope, element, attributes) {
                var option = scope.option;
                option.selected = option.selected || [];
                var template = optionsDirective.parseOption(option);
                scope.addItem = optionsDirective.addItem;
                element.append($compile(template)(scope));
            }
        };
    }


    static parseOption(option) {
        if (angular.equals(option.min_count, 1) && angular.equals(option.
max_count, 1)) {
            return '<ng-include 
src="\'components/options/bulletOptions.html\'"/>';
        } else {
            return '<ng-include 
src="\'components/options/checkboxOptions.html\'"/>';
        }
    }


    static addItem(option, item) {
        var index = option.selected.indexOf(item.id);
        if (angular.equals(index, -1)) {
            if (angular.equals(option.max_count, 1)) {
                option.selected = [item.id];
            } else {
                option.selected.push(item.id)
            }
        } else {
            option.selected.splice(index, 1);
        }
    }


    static directiveFactory($compile){
        optionsDirective.instance = new optionsDirective($compile);
        return optionsDirective.instance;
    }
}


optionsDirective.directiveFactory.$inject = ['$compile'];


export default angular
    .module('app.directives.options', [])
    .directive('optionsDirective', optionsDirective.directiveFactory)
    .name;


Thanks in advance for any assistance.



-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.