schmod / babel-plugin-angularjs-annotate

Add Angular 1.x dependency injection annotations to ES6 code
http://schmod.github.io/babel-plugin-angularjs-annotate
MIT License
240 stars 29 forks source link

Can not inject dependencies on class when declared on an object property #56

Open g0di opened 4 years ago

g0di commented 4 years ago

Hello there,

I'm stuck with an issue with following angularJS component declaration where the plugin does not generate $inject array

export const MyComponent = {
  template: '...',
  bindings: {},
  controller: class MyComponentController {
    constructor ($http) {
      'ngInject'
    }
  }
}

I think this is because the plugin has nowhere to include the MyComponentController.$inject = ['$http'] statement because of the way the class is declared and associated to the controller property.

There is two possible solutions in this case

  1. Add a MyComponent.controller.$inject = [...] statement
  2. (my favorite) Add a class property to end up with something like:
    export const MyComponent = {
    template: '...',
    bindings: {},
    controller: class MyComponentController {
    constructor ($http) {
      'ngInject'
    }
    get $inject() {
        return ['$http']
    }
    }
    }

For the moment I use the following workaround:

export const MyComponent = {
  template: '...',
  bindings: {},
  controller: (() => {
    class MyComponentController {
      constructor ($http) {
        'ngInject'
      }
    }
    return MyComponentController
  })()
}

It is a bit more verbose and add an additional nested level to the code

What do you think of this?

Thank you for reading !