带有 babel 和 ng-annotate/ngInject 的基于 ECMA6 class 的控制器导致 ReferenceError

Question

我有一个 Angular 1.4 控制器，其方法依赖于资源服务。我已经用 ng-annotate 注释了那个 class 的构造函数，但是，Angular 仍然诅咒在方法中找不到服务：

var MyResourceFactory = require("myResource.service");

class MyController {
    // @ngInject
    constructor($location, $stateParams, $state, MyResource) {
        ... // some initialization code
    }

    myMethod(data) {
        var resource = new MyResource();
        resource.data = data;
        resource.save();
    }
}

module.exports = angular.module("MyModule", [])
    .factory('MyResource', MyResourceFactory)
    .controller('MyController', MyController)
    .config(routes);

但是，在 myMethod (var resource = new MyResource()) 的第一行执行失败：

ReferenceError: MyResource is undefined
    at MyController.myMethod (myModule.module.js:214)
    ...

使用的技术：

Angular1.4
Webpack
通天塔
ng-注释

如何将 ngInject 应用于 ECMA6-class 方法？

Answer 1

MyResource 是构造方法的局部变量，外部不可用。在这种情况下，通常的做法是 public 属性:

class MyController {
    // @ngInject
    constructor($location, $stateParams, $state, MyResource) {
        this.MyResource = MyResource;
        // ... some initialization code
    }

    myMethod(data) {
        var resource = new this.MyResource();
        resource.data = data;
        resource.save();
    }
}

带有 babel 和 ng-annotate/ngInject 的基于 ECMA6 class 的控制器导致 ReferenceError

ECMA6 class-based controller with babel and ng-annotate/ngInject results in ReferenceError

angularjs

ecmascript-6

webpack

babeljs

ng-annotate