【问题标题】:ECMA6 class-based controller with babel and ng-annotate/ngInject results in ReferenceError带有 babel 和 ng-annotate/ngInject 的基于 ECMA6 类的控制器导致 ReferenceError
【发布时间】:2016-10-06 15:40:13
【问题描述】:

我有一个 Angular 1.4 控制器,其方法依赖于资源服务。我已经用 ng-annotate 注释了该类的构造函数,但是,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)
    ...

使用的技术:

  • Angular 1.4
  • 网页包
  • 通天塔
  • ng-注释

如何将 ngInject 应用于 ECMA6 类方法?

【问题讨论】:

    标签: angularjs ecmascript-6 webpack babeljs ng-annotate


    【解决方案1】:

    MyResource 是构造函数方法的局部变量,在外部不可用。在这种情况下,通常的做法是将其设为公共财产:

    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();
        }
    }
    

    【讨论】:

    • 啊,原来如此简单。我去睡觉的时间。谢谢!
    • 有没有办法在不暴露控制器上的 Angular 服务的情况下做到这一点?我只是不想将服务调用直接暴露给视图。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多